Question

我希望能够在下拉列表更改时选中一个复选框。将有多个复选框/下拉组合，它们是根据其他选择从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>

Answer 1

您可以使用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>

Answer 2

我认为您的输出结构不正确，您可以更好地返回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>

Answer 3

如果您有兴趣，这里提供了一种普通的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>

当下拉菜单更改为多个复选框/选择组合时，选中一个复选框

3 个答案: