使用 javascript 计算并添加动态 ID 和表单元素的值

Question

我正在创建一个列表，其中包含一些表单元素，如 html 复选框或单选按钮。我想将动态的ID 和for 值赋予其对应的LABEL 标签。除了使用 JQuery/JavaScript 之外的所有这些。

我的 JavaScript 不太好

$(document).ready(function() {
  function {
    var count = 0;
    var total = $('.product-menu li').length();

  }
});

.product-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-menu li {
  display: list-item;
  line-height: 2;
}
.product-menu label {
  font-weight: normal;
  vertical-align: middle;
  padding-left: 10px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="product-menu">
  <li>
    <input type="checkbox" id="pm-1">
    <label for="pm-1">New Arrivals</label>
  </li>
  <li>
    <input type="checkbox" id="pm-2">
    <label for="pm-2">Accessories</label>
  </li>
  <li>
    <input type="checkbox" id="pm-3">
    <label for="pm-3">Bags</label>
  </li>
  <li>
    <input type="checkbox" id="pm-4">
    <label for="pm-4">Jackets</label>
  </li>
</ul>

Answer 1

试试这样的

$(document).ready(function() {
    $(".product-menu li").each(function(index){
        var id=$(this).find("input").attr("id");
        if(id== undefined)
        {
          $(this).find("input").prop("id","pm-"+index);
          $(this).find("label").prop("for","pm-"+index);
        }
        else
        {
          $(this).find("label").prop("for",id);
        }
    });
});

.product-menu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-menu li {
    display: list-item;
    line-height: 2;
}
.product-menu label {
    font-weight: normal;
    vertical-align: middle;
    padding-left: 10px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="product-menu">
    <li>
        <input id="test" type="checkbox" >
        <label >New Arrivals</label>
    </li>
    <li>
        <input type="checkbox">
        <label >Accessories</label>
    </li>
    <li>
        <input type="checkbox">
        <label>Bags</label>
    </li>
    <li>
        <input id="test2" type="checkbox">
        <label >Jackets</label>
    </li>
</ul>

Answer 2

下面的代码将动态添加到输入中，并将 for 添加到每个 li 中的标签中。 这里index每个都以0开头。

$(document).ready(function() {  
      $(".product-menu li").each(function(index){
         $(this).find("input").attr("id","pm-"+index);
        $(this).find("label").attr("for","pm-"+index);  
        });
    });

Answer 3

JavaScript：

var list = document.getElementsByClassName("product-menu")[0].children;
var listLen = list.length;

for( var i = 0; i<=listLen; i++) {
    list[i].firstElementChild.id = "pm-"+(i+1);
    list[i].lastElementChild.setAttribute("for", "pm-"+(i+1));
}