I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in 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=".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>

I am creating a list which has some form elements like html checkbox or radio-buttons. I want to give them dynamic ID and for values to its corresponding LABEL tag. All this but using JQuery/JavaScript.

I am not that good in 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./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>

• javascript
• jquery
• html

• 1 How are you creating/generating list? If it's dynamically, why not implementing it on back-end? Or is it hard coded? – Bozidar Sikanjic Commented Mar 22, 2016 at 14:32
• It is hard-coded ! Actually, i'm learning Javascript. So needed to know, how to do it using JavaScript/JQuery – Deepak Yadav Commented Mar 23, 2016 at 4:23
• If you're still learning, I strongly advise you to learn pure JS, and than start with jQuery. – Bozidar Sikanjic Commented Mar 23, 2016 at 9:41

3 Answers 3

Try something like this

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

Below code will add dynamic into input and for into label in each li. Here index starts with 0 in each.

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

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));
}