CODEWITHSUNDEEP
jquerycheckbox
sahana
sahana

Reputation: 621

Load dependent checkboxes on selecting a checkbox

$('#Container').append('<input type="checkbox" id = '+ data[i].name + '/> ' + data[i].name + '<br />');

The above code displays a few checkboxes in box A (a div). If I select a checkbox in box A, I send that value to a database and it fetches a values that will be displayed in box B.

For example, if I select 2 checkboxes in Box A, I will send those values to the database and it will fetch corresponding values and display them in box B. 

 $('#checkbox').change(function() {

I would like to know what this #checkbox refers to. Is it the id of checkbox or something else?

Is there any way to implement this?

Upvotes: 0

Views: 422

Answers (1)

bipen
bipen

Reputation: 36531

yes it is an id..

$('#checkbox') <-- refers to an element  having an id as "checkbox" it might be div or checkbox or any element whose id is equal to checkbox. 
$('.checkbox')  <--refers to an element  having class as "checkbox"
$('input:checkbox') <--- refers to all input with type checkbox

go through the docs to learn more about selectors

updated

example

$('#Container').append('<input type="checkbox" class="ckbox" id = '+ data[i].name + '/> ' + data[i].name + '<br />');
$('#Container').append('<input type="checkbox" class="ckbox" id = '+ data[i].name + '/> ' + data[i].name + '<br />');

call class selector

$('#Container').on('change','.ckbox',function(){
    var  selectedValue = $("input.ckbox:checked").map(function(n){
        return this.value;
    });
   alert(seletedValue.join(','));
});

on() because the check is dynamically added so have to delegate the event for change event to occur.

Upvotes: 1

Related Questions