JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇

技術小牛人發表於2017-11-13

JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇? form內容如下:

因為PHP接收要用 陣列形式的 核取方塊,正常情況下 JQ可如果是這種

直接使用 $(“input[name=ptpt])即可。但是這種php接收的只是最後一個值,字串。

<label><input type=`checkbox` name=`ptpt` value=`a1` />a1</label>

<label><input type=`checkbox` name=`ptpt` value=`a3` />a3</label>

<label><input type=`checkbox` name=`ptpt` value=`a6` />a6</label>

<label><input type=`checkbox` name=`ptpt` value=`a9` />a9</label>


這樣PHP接收的是一個 ptpt的陣列

<form method=”post” id=”form1″ name=”form1″ action=”” >

<label><input type=`checkbox` name=`ptpt[1]` value=`a1` />a1</label>

<label><input type=`checkbox` name=`ptpt[3]` value=`a3` />a3</label>

<label><input type=`checkbox` name=`ptpt[6]` value=`a6` />a6</label>

<label><input type=`checkbox` name=`ptpt[9]` value=`a9` />a9</label>

<input type=”button” value=”全選” onclick=””> 

<input type=”button” value=”反選” onclick=””> 

<input type=”button” value=”取消全選” onclick=””> 




<script src=”jquery-1.7.2.min.js”></script>
<script>
$(function(){
var chks = $(`:checkbox[name^=”ptpt[“]`);  //匹配name開頭為 ptpt[ 的部分
$(`:button:eq(0)`).click(function(){
chks.attr(`checked`,`checked`);
})
$(`:button:eq(1)`).click(function(){
chks.each(function(){
if($(this).attr(`checked`)==`checked`)
$(this).removeAttr(`checked`);
else
$(this).attr(`checked`,`checked`);
});
})
$(`:button:eq(2)`).click(function(){
chks.removeAttr(`checked`);
})
})
</script>

本文轉自  陳小龍哈   51CTO部落格,原文連結:http://blog.51cto.com/chenxiaolong/1857132


相關文章