Question

页面加载时，有10个复选框。当我点击Select all复选框时，所有10个复选框都会被选中。现在我动态添加10个记录（使用ajax），其中包含复选框（页面上共有20个复选框）。现在我点击Select All复选框，原始复选框，即前10个复选框未选中（新增10个是原样，即未选中）。我再次单击Select All复选框，此时应选中所有20个复选框，但没有选中任何内容。

$(".productListed").attr( "checked", true );和$(".productListed").attr( "checked", false );

$(document).on('click', "#selectall", function(){ // my code });

我已经完成了Event binding on dynamically created elements?

点击Select All时，如何设置所有动态添加的复选框以选中/取消选中？

Answer 1

我不认为这是动态创建元素的事件绑定的情况。我创建了一个工作示例 - 请参阅http://jsfiddle.net/qwt7s0a7/

<强> HTML

<div class="container">
    <input class="cb" type="checkbox"/>
</div>
<button id='add'>Add checkbox</button>
<button id='selectAll'>Select all</button>

<强> JS

$(function(){
    $('#add').click(function(){
        $('.container').append('<input class="cb" type="checkbox"/>');
    });
    $('#selectAll').click(function(){
        var checked = $('.container .cb').first().prop('checked');
        $('.container .cb').prop('checked', !checked)
    });
});

Answer 2

请在下面找到示例代码和示例：https://jsfiddle.net/vv48fh3t/

<强> HTML

<input type="button" id="btnCheckAll" value="Check All"/>
<input type="button" id="btnAddNew" value="Add checkbox" >
<div class="checkDiv">
    <input type="checkbox" class="chk"/>check 1
    <input type="checkbox" class="chk"/>check 2
    <input type="checkbox" class="chk"/>check 3
    <input type="checkbox" class="chk"/>check 4
</div>

<强> JS

$(document).ready(function(){
    $("#btnCheckAll").click(function(){
    $(".chk").each(function(){
    $(this).prop("checked","checked");
    });
  });

  $("#btnAddNew").click(function(){
     for(var i=0;i<5;i++){
     $(".checkDiv").append("<input type='checkbox' class='chk'/>check "+i);
     }
 });
});

Answer 3

我使用.prop("checked", true)代替attr( "checked", true )

$(".productListed").prop( "checked", true ); and $(".productListed").prop( "checked", false );

每当您想要阅读HTML文档页面上任何动态添加的元素时，也可以使用它。

$(document).on('click', "#selectall", function(){ // my code });

使用jquery动态添加复选框（当用户点击全选复选框时显示已选中）

3 个答案: