jquerycheckbox核取方塊多次點選判斷選中狀態,以及全選/取消的程式碼示例

myDCool發表於2015-12-21
jQuery

2015年12月21日 10:52:51 星期一

目標, 點選當前的checbox, 判斷點選後當前checkbox是否是選中狀態.

html:

<input type="checkbox" onclick="contracts_checkall()" id="contracts_checkall"> 全選

js: 

1         var checkall = $("#contracts_checkall").attr(`checked`);
2         var checkall_value1 = $("#contracts_checkall").val();
3         var checkall_value2 = $(`#contracts_checkall`).is(`:checked`);
4         console.log(checkall);
5         console.log(checkall_value1);
6         console.log(checkall_value2);

第一次點選:

1  undefined
2  undefined
3  on
4  true

第二次點選:

1  undefined
2  undefined
3  on
4  false

總結, 用is()方法可以判斷當前核取方塊的狀態, 即使沒有相關屬性

全選/取消全選

 1 function contracts_checkall()
 2 {
 3     var checkall = $(`#contracts_checkall`).is(`:checked`);
 6     $("input[name=`contract[]`]").each(
 7         function () {
 8             this.checked=checkall;
 9             // $(this).attr(`checked`, checkall); //第一次選中和取消是成功的, 再次選中就不起作用了
10         }
11     );
12 }

 

Finger PHP 框架


相關文章