当多个复选框/选择组合的下拉列表更改时选中复选框

我希望能够在下拉列表更改时选中复选框。将有多个复选框/下拉列表组合，这些组合是根据其他选择从mySQL动态创建的。我已经想出了如何为 1 个组合做到这一点，而不是多个组合。我必须为每个组合创建一个函数吗？jQuery有办法吗？

这是我 1 个组合的工作代码。我需要做什么才能拥有多个复选框/下拉组合？

<!DOCTYPE html>
<html>
<body>
<label><input type='checkbox' name='location[]' id='location_FF' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' onChange='myCheckbox(this.value)'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<script>
function myCheckbox(val) {
var x = document.getElementById("location_FF");
if (val == "") {
x.checked = false;
} else {
x.checked = true;
}
}
</script>
</body>
</html>

你可以用jquery.closest()函数调用来完成

$(document).on('change', '.combo select', function() {
let parent = $(this).closest('.combo');
parent.find('input[type=checkbox]').prop('checked', !!$(this).val().trim())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="combo">
<label><input type='checkbox' name='location[]'  value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]' >
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>

我认为你的输出结构不对，你可以把你的html回报得更好，但我根据你当前的输出给出我的解决方案：

$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});

$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>

请注意，不要使用重复的ID！

location_FF

改进版本：

$('.Selective select').change(function() {
$(this).parent().find('input[type="checkbox"]').attr('checked', true)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>

如果您有兴趣，这里有一个普通的JS解决方案。

编辑：我注意到，如果您单击其标签，其他解决方案将取消选中该框。所以我添加了一个preventDefault()来阻止它。

var drops = document.querySelectorAll(".dropdown");
for (var i = 0; i < drops.length; i++) {
drops[i].addEventListener('change', (e) => {
var box = e.target.previousElementSibling.firstElementChild;
if (e.target.options[e.target.selectedIndex].value == '') {
box.checked = false;
} else {
box.checked = true;
}
});
}
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {  
labels[i].addEventListener('click', (e) => {
e.preventDefault();
});
}

<label><input type='checkbox' name='location[]' class='location' id='location_FF' value='FF' /> &nbsp;Front Flat </label>
<select name='addWhat[FF]' class="dropdown" id='addWhat_FF'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<br>
<label><input type='checkbox' name='location[]' class='location' id='location_BR' value='BR' /> &nbsp;Bottom Round </label>
<select name='addWhat[BF]' class="dropdown" id='addWhat_BR'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>

相关内容

最新更新

热门标签：