使用jquery动态添加复选框(当用户点击全选复选框时显示选中)

Dynamically added checkbox using jquery (show checked when user clicks on Select All checkbox)

本文关键字：复选框 显示 全选 用户 动态 jquery 添加 使用      更新时间：2023-09-26

页面加载时，有10个复选框。当我点击Select all复选框时，所有10个复选框都被选中。现在我动态地(使用ajax)添加了10条带有复选框的记录(页面上总共有20个复选框)。现在我点击Select All复选框，原始复选框即前10个复选框被选中(新添加的10个是未选中的)。我再次点击Select All复选框，此时所有20个复选框都应该被选中，但没有被选中。

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

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

我已经通过事件绑定动态创建的元素?

如何设置所有动态添加的复选框选中/未选中当我点击Select All ?

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

<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)
    });
});

请查看下面的示例代码和示例:https://jsfiddle.net/vv48fh3t/

<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);
     }
 });
});

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

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

当你想要读取HTML文档页面上任何动态添加的元素时，也可以使用这个。

$(document).on('click', "#selectall", function(){ // my code });
相关文章：