我的许多复选框之一有以下 HTML 代码(我无法访问/修改):
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
我想将复选框变成一个开关，据我所知我需要一个 <label>与复选框的“ID”关联的标签。不幸的是，上面的 HTML 代码只有 input 标签，没有 ID没有 <label>标签。
要创建一个复选框切换，我知道我需要一个独特的 ID和相关<label>每个复选框的标记，例如:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" ID="checkbox1"> <label for="checkbox1"></label>
我有两个问题:
如何添加
ID和<label>用 jQuery 标记到我现有的<input>标记以根据示例创建代码？鉴于我有 c。 40-50 个复选框，每个都需要自己的
ID和label标记，有没有办法使 jQuery 代码紧凑而不是复制粘贴代码 40-50 倍？
非常感谢您的帮助。非常感谢您!
编辑
<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>
最佳答案
您可以遍历每个复选框并在其后添加标签。
例子:
$('input[type="checkbox"]').each(function() {
var checkbox = $(this);
checkbox.after($("<label>").attr("for", checkbox.attr("id")));
});
以防您的初始 input没有设置 id 属性，则先手动设置:
$('input[type="checkbox"]').each(function(i, v) {
$(this).attr("id", ("checkbox_" + i))
$(this).after($("<label>").attr("for", $(this).attr("id")));
});
编辑 1:
将此代码放入 <head>是行不通的，因为当时尚未加载此代码寻址的内容。在关闭之前放置此代码 </body>标记或使用就绪功能。
$(function() {
// code above is here
});
关于javascript - 如何使用 jQuery 将 ID 和标签标签添加到复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48732679/