关于全选的问题....
我刚刚学习JS,用JS动态拼接成一个表格,但是需要全选和取消全选,并且要获取选择的ID,这个不会做...
- JScript code
$(document).ready(function(){ init(dataArray); $("#d11").datepicker({ }); $("#d12").datepicker({ }); $("#checkboxid").bind("click",select); //实现全选(取消全选);}); function select(str){?如何设置全选呢}function init(array){ var tableObj=document.getElementById("table"); var t = tableObj.insertRow(0); t.width="800"; t.height="8"; t.align = "center"; var d_1=t.insertCell(0); d_1.width="100"; d_1.height="18"; d_1.innerHTML="序号"; var d_2=t.insertCell(1); d_2.width="100"; d_2.height="18"; d_2.innerHTML="软件名称"; var d_3=t.insertCell(2); d_3.width="100"; d_3.height="18"; d_3.innerHTML="软件分类"; var d_4=t.insertCell(3); d_4.width="100"; d_4.height="18"; d_4.innerHTML="状态"; var d_5=t.insertCell(4); d_5.width="100"; d_5.height="18"; d_5.innerHTML="下架时间"; var d_6=t.insertCell(5); d_6.width="100"; d_6.height="18"; d_6.innerHTML="软件价格"; var d_7=t.insertCell(6); d_7.width="100"; d_7.height="18"; d_7.innerHTML="软件存货"; var d_8=t.insertCell(7); d_8.width="100"; d_8.height="18"; d_8.innerHTML="操作"; for(var i=0;i<array.length;i++){ var t_c= tableObj.insertRow(i+1); t_c.id="tr_"+array[i].id; t_c.width="800"; t_c.height="18"; t_c.align = "center"; var dc_1 = t_c.insertCell(0); dc_1.width="100"; dc_1.height="18"; dc_1.innerHTML = "<input type='checkbox' id='"+array[i].id+"addButton' value=array[i].goods_id/>  "+array[i].id; dc_1.style.cssText="text-align:left;"; var dc_2 = t_c.insertCell(1); dc_2.width="100"; dc_2.height="18"; dc_2.innerHTML =array[i].title; var dc_3 = t_c.insertCell(2); dc_3.width="100"; dc_3.height="18"; dc_3.innerHTML = array[i].dic_name; var dc_4 =t_c.insertCell(3); dc_4.width="100"; dc_4.height="18"; dc_4.innerHTML = array[i].confirm_status; var dc_5=t_c.insertCell(4); dc_5.width="100"; dc_5.height="18"; dc_5.innerHTML = array[i].undercarriage_time; var dc_6=t_c.insertCell(5); dc_6.width="100"; dc_6.height="18"; dc_6.innerHTML =array[i].sales_price; var dc_7=t_c.insertCell(6); dc_7.width="100"; dc_7.height="18"; dc_7.innerHTML =array[i].stocknumber; if(array[i].confirm_status=="上架"){ var dc_8=t_c.insertCell(7); dc_8.width="100"; dc_8.height="18"; dc_8.innerHTML="<a href=../mygoods/altermygoods.jsp?id="+array[i].id+">修改</a>"+" <a href='javascript:under("+array[i].id+")' > 下架</a>"+"<a href='javascript:AddTo("+array[i].id+")'> 追加key</a>"; }else{ var dc_8=t_c.insertCell(7); dc_8.width="100"; dc_8.height="18"; dc_8.innerHTML="<a href=../mygoods/altermygoods.jsp?id="+array[i].id+">修改</a>"+" <a href='javascript:UpGoods("+array[i].id+")' > 上架</a>"+"<a href='javascript:AddTo("+array[i].id+")'> 追加key</a>"; } }}
[解决办法]
可以根据单元格里面控件类型,遍历单元格选取:
var inputs = document.getElementById("table").getElementsByTagName("input");//获取所有的input标签对象
for(var i=0;i<inputs.length;i++){
var obj = inputs[i];
if(obj.type=='checkbox'){
obj.checked = true;
}
}
[解决办法]
你用到了jQuery吧,那就好办了。。
全选:
$("input[type='checkbox']").attr('checked',true);
取消全选:
$("input[type='checkbox']").attr('checked',false);
获取选中的值:
var _checkedValue='';
$("input[type='checkbox']:checked").each(function (){
_checkedValue+=$(this).val()+",";
});
alert(_checkedValue);
其中$("input[type='checkbox']:checked") 解释下这句代码吧:
input是tagName 标签 [type='checkbox'] 筛选type为checkbox的input标签 这里就可以设置全选与取消全选了。 :checked 有checked属性的input标签 很简单的吧。这都是jQuery的功劳!
这个会将页面所有的input type=checkbox的标签选中或取消 想要操作指定的怎么办?很简单。。。
给你想要操作的checkbox再加个属性 比如 name='tabel_checkbox' 则将我上面的代码改下
$("input[type='checkbox']") --> $("input[type='checkbox'][name='tabel_checkbox']")
就可以啦! 是不是很简单? 如果还不能满足你,及再继续加属性了。。。不过应该可以满足了。。哈哈
最主要的还是要多看api,孰能生巧。。。
有不懂的再问。。。