Advanced Search

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.

Expand | Embed | Plain Text

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


Comments

You need to login to view comments.