Handle dynamic generated checkboxes in javascript

Question

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

Ibrahim Khan · Accepted Answer · 2016-10-05 08:53:23Z

1

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

edited Oct 5, 2016 at 8:53

answered Oct 4, 2016 at 17:42

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

moody Over a year ago

thanks for the fast response. But it should act like a radiobutton :(

moody Over a year ago

thanks for the update. but unfortunately now i cannot have all checkboxes unchecked. min. none, max one option

Ibrahim Khan Over a year ago

You said functionality of radiobuttons thats why I do it like this. However see updated part of my answer. @moody

Ma3x · Accepted Answer · 2016-10-04 17:42:45Z

1

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/

answered Oct 4, 2016 at 17:42

Ma3x

6,6472 gold badges22 silver badges27 bronze badges

Comments

coder_strange · Accepted Answer · 2016-10-04 17:41:30Z

0

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.

answered Oct 4, 2016 at 17:41

coder_strange

2983 silver badges15 bronze badges

Comments

Sumeet Roy · Accepted Answer · 2016-10-04 18:23:02Z

0

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

    });

answered Oct 4, 2016 at 18:23

Sumeet Roy

1401 silver badge13 bronze badges

1 Comment

Anto S Over a year ago

It would be better if you add some comment and which portion of the OP's code you have changed.

Collectives™ on Stack Overflow

Handle dynamic generated checkboxes in javascript

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related