首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

关于全选的有关问题.

2012-09-29 
关于全选的问题....我刚刚学习JS,用JS动态拼接成一个表格,但是需要全选和取消全选,并且要获取选择的ID,这

关于全选的问题....
我刚刚学习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/> &nbsp"+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+")'  >&nbsp下架</a>"+"<a href='javascript:AddTo("+array[i].id+")'>&nbsp追加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+")'  >&nbsp上架</a>"+"<a href='javascript:AddTo("+array[i].id+")'>&nbsp追加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,孰能生巧。。。

有不懂的再问。。。


热点排行