如何使用jQuery向复选框添加ID和标签标签
[英]How to add ID and label tag to checkbox with jQuery
问题描述
I have the following HTML code (that I can't access/amend) for one of my many checkboxes: 
我的许多复选框之一具有以下HTML代码（我无法访问/修改）：
<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. 我想将复选框变成一个切换开关，据我了解，我需要一个与该复选框的“ ID”相关联的<label>标记。 Unfortunately, the HTML code as per above has only the input tag without ID and no <label> tag. 不幸的是，上面的HTML代码只有输入标签，没有ID ，也没有<label>标签。
To create a checkbox toggle I understand I would need a unique ID and associated <label> tag for each checkbox such as for example: 我知道要创建一个复选框切换，我需要每个复选框都具有唯一的ID和关联的<label>标签，例如：
<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
IDand<label>tag with jQuery to my existing<input>tag to create a code as per the example?如何将jQuery的ID和<label>标签添加到现有的<input>标签中，以根据示例创建代码？Given that I have c.
鉴于我有c。 40-50 checkboxes of which each needs its own IDandlabeltag, is there a way to make the jQuery code compact as opposed to copy paste the code 40-50x?40-50个复选框，每个复选框都需要有自己的ID和label标签，有没有一种方法可以使jQuery代码紧凑而不是复制粘贴代码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>
3 个解决方案
解决方案1
2 已采纳 2018-02-11 14:49:48
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没有设置id属性，请先手动设置它：
$('input[type="checkbox"]').each(function(i, v) {
$(this).attr("id", ("checkbox_" + i))
$(this).after($("<label>").attr("for", $(this).attr("id")));
});
EDIT 1: 编辑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. 将此代码放入<head>无效，因为该代码寻址的内容当时尚未加载。 Either put this code before closing </body> tag or use ready function. 在关闭</body>标记之前放置此代码，或使用ready函数。
$(function() {
// code above is here
});
解决方案2
1 2018-02-11 15:01:23
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: 和HTML我假设如下：
<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">
解决方案3
1 2018-02-11 15:05:59
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 我一直喜欢像<label><input /><span></span></label>这样来做我，我认为它易于使用并设置样式/ css
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.