JQuery的：複選框鏈不能正常工作

我有複選框（父複選框和孩子的）的「產業鏈」，而問題是：JQuery的：複選框鏈不能正常工作

當「父」複選框，首先單擊它運作良好，但在那之後，當點擊對'孩子'，'父'複選框然後是沒有做什麼。家長正在檢查/取消選中除了之前按下的孩子以外的孩子。

這裏是代碼：

的JavaScript

checks_bind(); 
function checks_bind(){ 
    $("#x_main").off('click'); 
    $("#x_main").on('click',function(){ 
    var obj = $(this); 
    var val = obj.is(':checked'); 
    $("#checks").find("input[type='checkbox']").attr('checked',val); 
    }); 
}

HTML

<input id='x_main' type='checkbox'/>Main<br> 
<p>--------------------------------</p> 
<div id='checks'> 
<input type='checkbox'/>1<br> 
<input type='checkbox'/>2<br> 
</div> 
<p>--------------------------------</p> 
<i>1 - Click on 1 or 2 <br>2 - Try <b>Main</b> checkbox. <br> 
3 - Main checkbox isn't working</i>

jsfiddle example

還有一個問題：

在複選框上使用.on('click.namespace')是否好用，因爲它運行良好？我可以使用.change()方法，但是我想在每次調用函數時調用.off('click.namespace')（或解除綁定）.on()。

來源

2017-04-27 Max Maximilian

使用'.prop（）'的https：//的jsfiddle。 net/jtx59Lxx/1/ – Satpal

由於checked是一個屬性，您需要使用的.prop()代替.attr()

$("#checks").find("input[type='checkbox']").prop('checked', val);

Updated Fiddle，一個良好的閱讀.prop() vs .attr()

如果你想使用.off()那麼它最好使用命名空間的事件。

來源

2017-04-27 12:14:15 Satpal

好吧謝謝！ –

試試這個：用戶'prop'而不是屬性，你可以根據主複選框的檢查條件檢查全部或全部取消全部。此外，您可以檢查所有複選框的計數以選中/取消選中主複選框。見下文

注：綁定點擊處理時，DOM已準備就緒，因此用戶$(document).ready或$(function(){})的<input>和checked屬性的

$(function(){ 
    $("#x_main").on("change", function(){ 
    $("#checks").find("input[type='checkbox']").prop("checked",$(this).is(":checked")); 
    }); 

    $("#checks input[type='checkbox']").on("change", function(){ 
     var total = $("#checks").find("input[type='checkbox']").length; 
     var checked = $("#checks").find("input[type='checkbox']:checked").length; 
     $("#x_main").prop("checked",total==checked); 
    }); 
});

JSFiddle Demo

來源

2017-04-27 12:21:25

checked屬性值是兩回事。他們可能應該被綁定/關聯，但他們不是。要改變屬性，你要麼進入DOM元素（$(...)[0].checked）：

$("#x_main").on('click',function(){ 
    var checked = $(this).is(':checked'); 
    $("input[type='checkbox']", $("#checks")).each(function(){ 
    $(this)[0].checked = checked; 
    }) 
})

...或者，使用jQuery的prop()：

$('#x_main').on('click', function(){ 
    $('input[type="checkbox"]', $('#checks')) 
     .prop('checked', $(this).is(':checked')) 
})

來源

2017-04-27 12:30:00

JQuery的：複選框鏈不能正常工作

回答

相關問題