установите флажок при изменении раскрывающегося списка для нескольких комбинаций флажок / выбор - PullRequest
Новая
       20

установите флажок при изменении раскрывающегося списка для нескольких комбинаций флажок / выбор

0 голосов
/ 02 февраля 2020

Я хочу иметь возможность установить флажок при изменении раскрывающегося списка. Будет несколько комбинаций флажков и выпадающих списков, которые динамически создаются из 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>

Ответы [ 3 ]

0 голосов
/ 02 февраля 2020

Я думаю, что ваша структура вывода неверна, вы могли бы вернуть 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>
0 голосов
/ 02 февраля 2020

Вот вам ванильное 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>
0 голосов
/ 02 февраля 2020

Вы можете сделать с 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>
...