Reputation: 197
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
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
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
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
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