CODEWITHSUNDEEP
javascriptjquery
Xibition
Xibition

Reputation: 197

change checkbox label after select

I have some checkboxes (101) which labels should change based on a select input. The JS I have only runs for one, which is logical. Though I'm not very familiar with jquery functions, I don't know how to proceed for all the 101 checkboxes.

the inputs :

<?php

    for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want
        echo '<div class="each_checkboxes">';
        //  $j = sprintf('%04u', $i);

        echo '<label id="contact" for="checkbox"></label>';
        echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>';

        echo '</div>';

    endfor;
?>

the select :

<select id="method" name="server" class="custom-dropdown__select custom-dropdown__select--white" required>
    <option value="0" default>Choose server</option>
    <option value="server1">server 1</option>
    <option value="server2">server 2</option>
</select>

the js :

$(document).ready(function () {
    $('#method').change(function () {
        var method = $('option:selected').val();

        if (method == "server1") {

            $('#contact').text("MA" + i);

        } else if (method == "server2") {

              $('#contact').text("SAS" + i);

        }
    });

});

Upvotes: 1

Views: 522

Answers (4)

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You need to use class instead of id, because id should be unique for each element. Try like following.

PHP:

<?php
    for ($i = 1; $i < 102; $i++): 

        echo '<div class="each_checkboxes">';

        echo '<label class="contact" for="checkbox'.$i.'"></label>';
        echo '<input type="checkbox" name="tape[]" id="checkbox'.$i.'" value=""/>';

        echo '</div>';

    endfor;
?>

jQuery:

$(document).ready(function () {
    $('#method').change(function () {
        var method = $('option:selected').val(),
            text = "";

        if (method == "server1") {
            text = "MA";
        } else if (method == "server2") {
            text = "SAS";
        }

        $('.contact').each(function (i) {
            var value = text + (++i);
            $(this).text(value);
            $('#' + $(this).attr('for')).val(value);
        });
    });
});

Upvotes: 1

kangaswad
kangaswad

Reputation: 775

Use "class" for your checkbox's label instead of "id". Basically, "id" of an element should be unique. But class, more than one elements can have the same class.

So, the label should be like this:

<label class="contact" for="checkbox"></label>

Then your onchange method should be like this:

$('#method').change(
  function () {
      var method = $('option:selected').val();
      if (method == "server1") {
        $('.contact').text("MA" + i);
      } else if (method == "server2") {
        $('.contact').text("SAS" + i);
      }
});

Upvotes: 0

Diptesh Atha
Diptesh Atha

Reputation: 911

Use label class instead of id 

<?php

  for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want
      echo '<div class="each_checkboxes">';
    //  $j = sprintf('%04u', $i);

      echo '<label class="contact" for="checkbox"></label>';
      echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>';

      echo '</div>';

endfor;
  ?>

js code is 

 $(document).ready(function () {
    $('#method').change(
    function () {
        var method = $('option:selected',this).val();

        if (method == "server1") {

            $('.each_checkboxes label.contact').html("MA" + i);

        } else if (method == "server2") {

              $('.each_checkboxes label.contact').html("SAS" + i);

        }
    });

});

Upvotes: 0

tmw
tmw

Reputation: 1484

You are referencing to id attribute in your jQuery selector which will only look for first match in your dom You need to assign a class to your label and reference to that when changing you label text then this will work.

<?php

  for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want
      echo '<div class="each_checkboxes">';
    //  $j = sprintf('%04u', $i);

      echo '<label id="contact" class="contact" for="checkbox"></label>';
      echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>';

      echo '</div>';

endfor;
  ?>

and in jQuery just use class selector like this;

$(document).ready(function () {
    $('#method').change(
    function () {
        var method = $('option:selected').val();

        if (method == "server1") {

            $('.contact').text("MA" + i);

        } else if (method == "server2") {

              $('.contact').text("SAS" + i);

        }
    });

});

That's it.

Upvotes: 0

Related Questions