javascript - 使用 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>