Jquery Получает значение из Select, а затем устанавливает флажок с тем же значением

#jquery

Вопрос:

Что мне нужно сделать, так это то, что, когда пользователь выбирает категорию из раскрывающегося списка, она автоматически включается в флажки.

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

Например: (Существует около 50 категорий — Но я показал 2 в примере для простоты)

 Select Main Category
      
        <select class="select enhanced" name="enhanced" id="enhanced">
            <option value="none" data-price="0">Select your answer</option>
            <option class="maincats" data-price="24" name="maincat" value="Accountancy and VAT Information"> Accountancy and VAT Information</option>
            <option class="maincats" data-price="24" name="maincat" value="Business Development"> Business Development</option>
        </select>
             
 
Select additional categories<BR>      
        <input type="checkbox" class="enhancedcats" data-price="24" name="checkbox_enhnaced[]" value="Accountancy and VAT Information"> Accountancy and VAT Information £24.00<br>
        <input type="checkbox" class="enhancedcats" data-price="24" name="checkbox_enhnaced[]" value="Business Development"> Business Development £24.00<br>
 

Поэтому, если вы выберете в раскрывающемся списке Информацию об оплате и НДС (Выберите), то флажок для Информации об оплате и НДС должен быть установлен автоматически

Я попробовал следующее, но это не сработало

 $(document).ready(function() {
$('#enhanced').change(function() { 
  let selectedValAw = $(this).find('option:selected').val();
   let isACheckedd = $(this).prop("checked");
   $(`.enhancedcats[value=${selectedValAw}]`).prop("checked", isACheckedd);
    });
    });
 

Я также попробовал следующее (но этот код только что все проверил)

 $('#enhanced').change(function() { 
  
  let selection = $(this).find('option:selected').attr('data-capacity')
   let isAChecked = $(this).prop("checked");
 // alert(selection);
$(":checkbox[value=[selection]]").attr("checked","true");

    });
 

Может ли кто-нибудь помочь, пожалуйста

Спасибо

Ответ №1:

Я обновил ваше первое решение, вы забыли кавычки вокруг выбранного значения.

При этом let isACheckedd = $(this).prop("checked"); вы проверяете свойство checked select элемента , значение которого равно false.

 $('#enhanced').change(function() { 
  let selectedValAw = $(this).find('option:selected').val();
  $(".enhancedcats:checked").prop("checked", false);//Remove this line if you don't want to uncheck all checkboxes
  $(`.enhancedcats[value="${selectedValAw}"]`).prop("checked", true);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select Main Category
      
        <select class="select enhanced" name="enhanced" id="enhanced">
            <option value="none" data-price="0">Select your answer</option>
            <option class="maincats" data-price="24" name="maincat" value="Accountancy and VAT Information"> Accountancy and VAT Information</option>
            <option class="maincats" data-price="24" name="maincat" value="Business Development"> Business Development</option>
        </select>
             
 
Select additional categories<BR>      
        <input type="checkbox" class="enhancedcats" data-price="24" name="checkbox_enhnaced[]" value="Accountancy and VAT Information"> Accountancy and VAT Information £24.00<br>
        <input type="checkbox" class="enhancedcats" data-price="24" name="checkbox_enhnaced[]" value="Business Development"> Business Development £24.00<br> 

Комментарии:

1. Спасибо, Том. 🙂