如何使用jQuery向復選框添加ID和標簽標簽

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>

我有兩個問題：

如何將jQuery的ID和<label>標簽添加到現有的<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

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

第一次輸入的代碼將是

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

如何使用jQuery向復選框添加ID和標簽標簽

問題描述

3 個解決方案

解決方案1
2 已采納 2018-02-11 14:49:48

解決方案2
1 2018-02-11 15:01:23

解決方案3
1 2018-02-11 15:05:59

如何使用jQuery向復選框添加ID和標簽標簽

問題描述

3 個解決方案

解決方案1 2 已采納 2018-02-11 14:49:48

解決方案2 1 2018-02-11 15:01:23

解決方案3 1 2018-02-11 15:05:59

解決方案1
2 已采納 2018-02-11 14:49:48

解決方案2
1 2018-02-11 15:01:23

解決方案3
1 2018-02-11 15:05:59