處理動態生成的複選框中的JavaScript

Question

我生成動態複選框與單選按鈕的功能

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

UPDATE：複選框組表現得像單選按鈕。

$(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

如果你追加後的任何DOM元素（即未來的元素），$（）。在不會與那些元素，則嘗試使用$（文件）。在（ '點擊'， '.class'，function（）{}）;代替。

Answer 3

你必須改變你的選擇與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 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); 
    } 

    });