I have the following HTML code (that I can't access/amend) for one of my many checkboxes:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
I want to turn the checkbox into a toggle, for which I understand I need a <label>
tag associated with the 'ID' of the checkbox. Unfortunately, the HTML code as per above has only the input tag without ID
and no <label>
tag.
To create a checkbox toggle I understand I would need a unique ID
and associated <label>
tag for each checkbox such as for example:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" ID="checkbox1"> <label for="checkbox1"></label>
I have two questions:
How can I add the ID
and <label>
tag with jQuery to my existing <input>
tag to create a code as per the example?
Given that I have c. 40-50 checkboxes of which each needs its own ID
and label
tag, is there a way to make the jQuery code compact as opposed to copy paste the code 40-50x?
I would much appreciate your help. Thank you very much in advance!
EDIT
<script> $('input[type="checkbox"]').each(function(i, v) { var checkbox = $(this); checkbox.attr("id", ("checkbox_" + (i + 1))) checkbox.after($("<label>").attr("for", checkbox.attr("id"))); }); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="geodir-filter-cat gd-type-single gd-field-fieldset"><span>Header</span> <ul> <li><input type="checkbox" class="cat_input" name="subcategory1a" value="1" /> </li> <li><input type="checkbox" class="cat_input" name="subcategory1b" value="1" /> </li> </l> </div>
You can iterate over each checkbox and add the label after it.
Example:
$('input[type="checkbox"]').each(function() {
var checkbox = $(this);
checkbox.after($("<label>").attr("for", checkbox.attr("id")));
});
In case your initial input
doesn't have an id attribute set, then set it manually first:
$('input[type="checkbox"]').each(function(i, v) {
$(this).attr("id", ("checkbox_" + i))
$(this).after($("<label>").attr("for", $(this).attr("id")));
});
EDIT 1:
Putting this code into <head>
is not going to work, as the content that this code addressing is not yet loaded at that time. Either put this code before closing </body>
tag or use ready function.
$(function() {
// code above is here
});
According your given markup please see below:
$('.cat_input').each(function() {
var checkbox = $(this);
checkbox.attr('id', 'checkbox'+checkbox.index()); // Adding ID attribute
checkbox.after($("<label for='checkbox"+ checkbox.index() +"'>").text(checkbox.val())); // Adding label with for attribute
});
And HTML I assumed like following:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
<input type="checkbox" class="cat_input" name="subcategory1a" value="2">
<input type="checkbox" class="cat_input" name="subcategory1a" value="3">
<input type="checkbox" class="cat_input" name="subcategory1a" value="4">
<input type="checkbox" class="cat_input" name="subcategory1a" value="5">
I always prefer to do it like <label><input /><span></span></label>
for me I think its simple to use and to style/css it
$(document).ready(function(){ $('.cat_input').each(function(i){ // index start from 0 i = i + 1; $(this).val(i).attr('id' , 'checkbox' + i).wrap('<label></label>').closest('label').append('<span>'+i+'</span>'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" /> <input type="checkbox" class="cat_input" name="subcategory1a" />
the code for first input will be
<label>
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" id="checkbox1"/>
<span>1</span>
</label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.