Add \'label for\' matching input dynamically

/ Published in: jQuery
Save to your folder(s)

Dynamically add HTML tag to input description, matching the input by adding an ID value to the input.

Copy this code and paste it in your HTML
  1. $('ul li').each(function(index) {
  2. var spanContent = $(this).children('span').html(),
  3. spanContent = spanContent.toLowerCase().replace(/ /g, '-');
  4. $(this).children('input').attr('id', 'input-'+spanContent);
  5. $(this).children('span').wrapInner('<label for="input-'+spanContent+'"/>');
  6. });
  8. <ul>
  9. <li><input type="checkbox" name="input-name-1" value="" /><span>Description 1</span></li>
  10. <li><input type="checkbox" name="input-name-2" value="" /><span>Description 2</span></li>
  11. <li><input type="checkbox" name="input-name-3" value="" /><span>Description 3</span></li>
  12. </ul>

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.