Question

我的许多复选框之一有以下HTML代码（我无法访问/修改）：

<input type="checkbox" class="cat_input" name="subcategory1a" value="1">

我想将复选框切换为切换按钮，据我所知，我需要一个与该复选框的“ID”关联的<label>标记。遗憾的是，上面的HTML代码只包含没有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-50x？

我非常感谢你的帮助。非常感谢你提前！

修改

<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" /> &nbsp;</li>
 <li><input  type="checkbox" class="cat_input" name="subcategory1b"  value="1" /> &nbsp;</li>
 </l>
 </div>

Answer 1

您可以遍历每个复选框并在其后面添加标签。

示例：

$('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>标记之前放置此代码或使用ready函数。

$(function() {
    // code above is here
});

Answer 2

根据您给出的标记，请参阅以下内容：

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

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">

Answer 3

对我来说，我总是喜欢像<label><input /><span></span></label>这样做我觉得它很简单，可以用来设计风格/ css它

＆＃13;

$(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>');
  });
});

＆＃13;

<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" />

＆＃13;

第一次输入的代码将是

<label>
  <input type="checkbox" class="cat_input" name="subcategory1a" value="1" id="checkbox1"/>
  <span>1</span>
</label>

如何使用jQuery

3 个答案: