實現table中checkbox復選框、以及判斷checked是否被選中、js操作checkedbox選中

 

上圖是實現效果。

下面貼代碼

表的第一行也就是<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屬性則可以取到屬性值相同的所有。