在javascript中处理动态生成的复选框答案

【问题标题】：Handle dynamic generated checkboxes in javascript在javascript中处理动态生成的复选框
【发布时间】：2017-02-12 23:30:48
【问题描述】：

我正在生成具有单选按钮功能的动态复选框

var foo = $("#foo");
for (var i = 0; i < 5; i++) {
var descr = $('<br><tr><td><label> TEST_'+i+':</label></td><td colspan="2">' +
    '<div class="controls gprs_modbus_checkbox_' + i + '">'+
    '<label class="checkbox"><input class="chb" type="checkbox" value="option1" > GSM</label>'+
    '<label class="checkbox"><input class="chb" type="checkbox" value="option2" > RTU</label>' +
    '<label class="checkbox"><input class="chb" type="checkbox" value="option3" > TCP</label>'+
    '</div></td><td></td><td></td></tr>' );
    $(descr).insertAfter(foo);        
}

var m;
$('.chb').on('click',function() {
    m = $(this).closest('div').prop('class').split(' ')[1];
    console.log(m);
    var checked = $(this).is(':checked');

    $('.'+ m +' >label> input[type="checkbox"]').prop('checked',false);
    if(checked) {
        $(this).prop('checked',true);
    }
})

我想要做的是，当我点击“GSM”时，所有其他“GSM”也应该被“点击”。它应该同步反应。但仍然必须有可能不选择任何复选框。

JS FIDDLE

【问题讨论】：

标签： jquery checkbox dynamic

【解决方案1】：

首先你应该使用event delegation 来动态生成元素。其次，您可以使用复选框值来选择类似的复选框，如下所示。

$(document).on('change', '.chb', function() {
    var value = $(this).val();
    $('.chb[value=' + value + ']').prop('checked', this.checked);
})

UPDATED FIDDLE

更新：复选框组的行为类似于单选按钮。

$(document).on('change', '.chb', function () {
    var value = $(this).val();
    $('.chb[value=' + value + ']').prop('checked', this.checked);

    if (this.checked)
        $('.chb').not('[value=' + value + ']').prop('checked', false);
})

UPDATED FIDDLE 2

【讨论】：

感谢您的快速响应。但它应该像一个单选按钮:(
感谢您的更新。但不幸的是，现在我不能取消选中所有复选框。分钟。无，最多一个选项
你说functionality of radiobuttons 这就是我这样做的原因。但是请参阅我的答案的更新部分。 @moody

【解决方案2】：

您必须更改您的选择器以匹配所有具有类chb 的输入并且具有与刚刚单击的输入框相同的值。然后你只需更改他们的checked 以匹配。

$('.chb').on('click',function() {
  var value = $(this).attr('value');
  $('input.chb[value="'+value+'"]').prop('checked', $(this).prop('checked'));
});

https://jsfiddle.net/duzf1t44/3/

【讨论】：

【解决方案3】：

如果您在之后（即未来元素）附加任何 dom 元素，$().on 将无法与这些元素一起使用，请尝试 $(document).on('click','.class', function() {});而是。

【讨论】：

【解决方案4】：

var foo = $("#foo");
for (var i = 0; i < 5; i++) {
    var descr = $('<br><tr><td><label> TEST_'+i+':</label></td><td colspan="2">' +
        '<div class="controls gprs_modbus_checkbox_' + i + '">'+
        '<label class="checkbox"><input class="chb" type="checkbox" value="option1"> GSM</label>'+
        '<label class="checkbox"><input class="chb" type="checkbox" value="option2"> RTU</label>' +
        '<label class="checkbox"><input class="chb" type="checkbox" value="option3"> TCP</label>'+
        '</div></td><td></td><td></td></tr>' );
        foo.append(descr);        
}


var m;
    $('.chb').on('click',function() {
        m = $(this).val();
    if($(this).is(":checked")){
      foo.find("input[value='"+m+"']").prop('checked',true);
    } else {
        foo.find("input[value='"+m+"']").prop('checked',false);
    }

    });

【讨论】：

如果您添加一些注释以及您更改了OP代码的哪一部分会更好。