实现table中checkbox复选框以及判断checked是否被选中js操作checkedbox选中

Posted 2020-08-15 蝈蝈大王

 

上图是实现效果。

下面贴代码

表的第一行也就是<th>中的代码，onclick事件是实现全选或者全不选效果。

<th>
<input id="allboxs" onclick="allcheck()" type="checkbox"/>
</th>

td中的代码

<td>
<input  name="boxs" type="checkbox"/>
</td>

js中实现全选、全不选效果

function allcheck() {
             var nn = $("#allboxs").is(":checked"); //判断th中的checkbox是否被选中，如果被选中则nn为true，反之为false
                 if(nn == true) {
                     var namebox = $("input[name^=\'boxs\']");  //获取name值为boxs的所有input
                     for(i = 0; i < namebox.length; i++) {
                         namebox[i].checked=true;    //js操作选中checkbox
                     }
                 }
                 if(nn == false) {
                     var namebox = $("input[name^=\'boxs\']");
                     for(i = 0; i < namebox.length; i++) {
                         namebox[i].checked=false;
                     }
                 }
             }

 

以上代码值得一提的是，获取checkbox的值或其他的什么，建议用name属性值操作，因为id属性在每一个页面中默认是唯一的，而name属性则可以取到属性值相同的所有。