Adding checkboxes to an unordered list using jQuery

Question

What would be the jQuery code to add a checkbox to every <li> element in an unordered list and handle their callbacks obtaining the li text or checkbox properties like name/value?

I started with something like this:

$(document).ready(function() {
   $("#SuperTextbox1_Results").children('li').each(function() {
      $(this).prepend('<input type="checkbox" name="test" value="test" />');
   });
});

Please post the code for what you've tried and then I'm sure someone will help you out. — Lazarus
– Lazarus, Commented Aug 18, 2009 at 12:10

RaYell · Accepted Answer · 2009-08-18 12:12:13Z

6

// checkbox click event handler
$('input:checkbox.liChk').live('click', function () {
    // access parent li, do whatever you want with it
    console.log($(this).parent('li'));
});    

// append checkboxes to all li tags
$('<input type="checkbox" class="liChk" />').appendTo('li');

answered Aug 18, 2009 at 12:12

RaYell

70.6k20 gold badges127 silver badges154 bronze badges

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

2 Comments

Raúl Roa Over a year ago

Replacing 'li' for $("#your-ul").children('li') will allow adding the checkboxes to a specific unordered list.

Adrian Carr Over a year ago

Since .live is deprecated in jQuery 1.7 and removed in 1.9, should probably use .on instead. (Simply replace .live with .on in example.) api.jquery.com/live

Collectives™ on Stack Overflow

Adding checkboxes to an unordered list using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related