CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

How can i add id's and add labels to each checkbox dynamically

I have a table filled with checkboxes , none of them have any ID's. I do not have ability to change the HTML to add checkbox ID and then add a label so i can style with FontAwesome.

To generate ID for each checkbox , i added this function

$("input").each(function () {
    $(this).uniqueId();
});

The current HTML looks like this

<tr><td>
<input type="checkbox" name="RB0002" value="11192">
</td></tr>

<tr><td>
<input type="checkbox" name="RB0002" value="11242">
</td></tr>

<tr><td>
<input type="checkbox" name="QB0002" value="12122">
</td></tr>

<tr><td>
<input type="checkbox" name="WR0002" value="13444">
</td></tr>

The script is adding uniqueID to each input now , but i wanted to add a label that would match each input ID , how can i get that done , so the resulting HTML would look like this

<tr><td>
<input id="randomID1" type="checkbox" name="RB0002" value="11192">
<label for="randomID1"></label>
</td></tr>

<tr><td>
<input id="randomID2" type="checkbox" name="RB0002" value="11242">
<label for="randomID2"></label>
</td></tr>

<tr><td>
<input id="randomID3" type="checkbox" name="QB0002" value="12122">
<label for="randomID3"></label>
</td></tr>

<tr><td>
<input id="randomID4" type="checkbox" name="WR0002" value="13444">
<label for="randomID4"></label>
</td></tr>

Upvotes: 0

Views: 779

Answers (3)

Always Helping
Always Helping

Reputation: 14570

You can do this multiple ways and you can choose what suits you the best below. You do not even need to use a uniqueId plugin to add id's

1st Solution

You can simply have a counter to add id. Once ids are added use wrap method all those id's with with a label and some text of your choice.

$('input').wrap(function() {
  return $('<label />', {
    text: $(this).attr('id'), //some text for each label
    for: $(this).id //id
  })
})

Live Demo:

var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID' + counter)
  counter++
});

$('input').wrap(function() {
  return $('<label />', {
    text: $(this).attr('id'),
    for: $(this).id
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11192">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11242">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="QB0002" value="12122">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="WR0002" value="13444">
    </td>
  </tr>

</table>

2nd Solution

If you want to do all in one function then you can use simply append function like this below:

var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID' + counter) //assign ID
  counter++
  //Add label
  var getID = $(this).attr('id') //label
  var label = '<label for=' + getID + '>' + getID + '</label>' //make label
  var tdParent = $(this).parent() //td parent
  tdParent.append(label) //append label after input
});

Live Demo: 

var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID' + counter) //assign ID
  counter++
  //Add label
  var getID = $(this).attr('id') //label
  var label = '<label for=' + getID + '>' + getID + '</label>' //make label
  var tdParent = $(this).parent() //td parent
  tdParent.append(label) //append label after input
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11192">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11242">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="QB0002" value="12122">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="WR0002" value="13444">
    </td>
  </tr>
</table>

Upvotes: 1

umakant nishad
umakant nishad

Reputation: 11

Assign uniqueId to a variable and then append it.

$("input").each(function () {

    let id = 'randomID4';

   $('#'+id).append('<label for='+id+'></label>');

});

Upvotes: 1

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

After generate ids, you can create label element and put it after each input with .after():

$("input").each(function () {
    // $(this).uniqueId();
    let label = document.createElement('label');
    label.setAttribute('for', this.id);
    label.innerText = this.id;
    $(this).after(label);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><td>
<input id="randomID1" type="checkbox" name="RB0002" value="11192">
</td></tr>

<tr><td>
<input id="randomID2" type="checkbox" name="RB0002" value="11242">
</td></tr>

<tr><td>
<input id="randomID3" type="checkbox" name="QB0002" value="12122">
</td></tr>

<tr><td>
<input id="randomID4" type="checkbox" name="WR0002" value="13444">
</td></tr>
</table>

Upvotes: 3

Related Questions