Cybercrux

Everything is achievable through technology

Checkbox list

Checkbox list  Selected value

 

Demo

 

JS

$(‘input[type=checkbox]’).on(‘click’, function () {
var foo = [];
$(this).closest(“div”).find(“input[type=’checkbox’]:checked”).each(function () {
alert($(this).parent().text());
});
});

 

Html

<div>
<label>
<input type=”checkbox” checked >abc
</label>
<label>
<input type=”checkbox” checked >defg
</label>
<label>
<input type=”checkbox” checked >hij
</label>

</div>

<div >
<label>
<input type=”checkbox” checked >123
</label>
<label>
<input type=”checkbox” checked >456
</label>
<label>
<input type=”checkbox” checked >678
</label>

</div>

Advertisements

One thought on “Checkbox list

  1. // First method – Recommended
    $(‘#checkbox’).prop(‘checked’) // Boolean true

    // Second method – Makes code more readable (e.g. in if statements)
    $(‘#checkbox’).is(‘:checked’) // Boolean true

    // Third method – Selecting the checkbox & filtering by :checked selector
    $(‘#checkbox:checked’).length // Integer >0
    $(‘#checkbox:checked’).size() // .size() can be used instead of .length

    // Fourth method – Getting DOM object reference
    $(‘#checkbox’).get(0).checked // Boolean true
    $(‘#checkbox’)[0].checked // Boolean true (same as above)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s