首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

jQuery Checkbox 取消勾選判斷:選擇器 :checked 只匹配已勾選,需針對單個元素判斷

     編輯:程式設計疑難解答

問題代碼

// JSP
<input type="checkbox" name="selectCode" value="..." onclick="selectProductCode('...', this)">

// JS
function selectProductCode(code, cb) {
    alert($("input:checkbox[name='selectCode']:checked").is(':checked'));
}

現象:取消勾選時,只有最後一個為 `false`,前面取消的仍 `true`。

原因

`$("input:checkbox[name='selectCode']:checked")` **選取的是所有已勾選的 checkbox 集合**,`.is(':checked')` 只要集合**非空**即返回 `true`。
取消第一個時,集合還有其它勾選項 → `true`;只有**全取消**時集合為空 → `false`。

修正:針對當前元素判斷

// JSP 傳遞 this
onclick="selectProductCode('...', this)"

// JS
function selectProductCode(code, cb) {
    alert(cb.checked); // 原生屬性,true/false
    // 或 jQuery
    alert($(cb).is(':checked'));
    // 後續業務:如同步更新隱藏域、計算總價...
}

進階:獲取所有已勾選值

var checkedValues = $("input:checkbox[name='selectCode']:checked").map(function() {
    return this.value;
}).get(); // 數組
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved