jquery - Jquery 从 Select 中获取值，然后选中具有相同值的复选框

Question

我需要做的是，当用户从下拉列表中选择一个类别时，它会自动在复选框中选中。

复选框值的下拉选项值将相同

例如：（大约有 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");

    });

任何人都可以帮忙吗

谢谢

标签： jquery

Answer 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>