Question

我正在生成具有radiobuttons功能的动态复选框

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

Answer 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

Answer 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/

Answer 3

如果你追加任何dom元素（即将来的元素），$（）。on将无法使用这些元素，请尝试$（document）.on（'click'，'。class'，function（） {}）;代替。

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

    });

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

4 个答案: