Jquery Get Value from Select and then check Checkbox with same value-CodePudding

What I need to happen is when a user chooses a category from the dropdown it is automatically then checked in the checkboxes.

The dropdown option values will be the same for Checkbox values

For example: (There are about 50 categories - But I have shown 2 in the example for simplicity)

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>

So if you choose Accoutancy and VAT Information in the dropdown (Select) then the check box for Accoutancy and VAT Information should automatically be checked

I have tried the following, But this did not work

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

I also tried the following (but this code just checked everything)

$('#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");

    });

Can anyone assist please

Thanks

CodePudding user response：

I updated your first solution, you forgot quotes around the selected value.

When doing let isACheckedd = $(this).prop("checked");, you're checking the property checked of the select element, which value is 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>