CODEWITHSUNDEEP
jquerycheckboxdynamic
moody
moody

Reputation: 402

Handle dynamic generated checkboxes in javascript

I am generating dynamic checkboxes with the functionality of 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);
    }
})

What I am trying to do is that when I click 'GSM', all others 'GSM's should be 'clicked' too. It supposed to react synchronized. But there must still be the possibility to select none of the checkboxes.

JS FIDDLE

Upvotes: 0

Views: 766

Answers (4)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Firstly you should use event delegation for dynamically generated element. And secondly you can use checkbox value for select similar checkbox like following.

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

UPDATED FIDDLE

UPDATE: checkbox group to behave like radio button.

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

Upvotes: 1

Sumeet Roy
Sumeet Roy

Reputation: 140

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

    });

Upvotes: 0

Ma3x
Ma3x

Reputation: 6549

You have to change your selector to match all inputs with class chb and with the same value as the input box that was just clicked. Then you just change their checked to match.

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

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

Upvotes: 1

coder_strange
coder_strange

Reputation: 298

If you are appending any dom element after(i.e. future element), $().on won't work with those element, try $(document).on('click','.class', function(){}); instead.

Upvotes: 0

Related Questions