jQuery Change radio button on select box change

Question

I am not very good with jQuery and I am having trouble getting this right. I need to change the radio button selected if I select a certain value in a different select box.

  <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" name="sourceBtn" class="btn btn-lg" value="CN"><label for="sourceBtns1">CHINA</label> <input type="radio" id="sourceBtns2" name="sourceBtn" class="btn btn-lg" value="ID" ><label for="sourceBtns2">INDONESIA</label> <input type="radio" id="sourceBtns3" name="sourceBtn" class="btn btn-lg" value="TH" ><label for="sourceBtns3">THAILAND</label> <input type="radio" id="sourceBtns4" name="sourceBtn" class="btn btn-lg" value="US"><label for="sourceBtns4">UNITED STATES</label> </div> 

 <div id="priceSelect"> <select name="priceSelect" id="priceSelect" class="form-control"> <option value="FTLW">Domestic Full Truck Load</option> <option value="PTLW">Domestic Partial Truck Load</option> <option value="FTL" selected>International</option> </select> </div> 

I am trying to get the radio button to select #sourceBtns4 when the "FTLW" option is selected in the select box.

This is the function that I am using. I do not get an error, but I cannot get the function to work. I am not sure what the problem is. I have tried several different things, but none of them work.

Any suggestions?

 $(document).ready(function() { $('#priceSelect').change(function(){ if($(this).val() == 'FTLW' ){ $('#sourceBtns4').prop("checked", true); } }); }); 

Answer 1

You can't have two elements with the same id . Your div and your select both had an id of priceSelect . It's only the select that you care about.

 $(document).ready(function() { $('#priceSelect').change(function(){ console.log($(this).val()); if($(this).val() == 'FTLW' ){ $('#sourceBtns4').prop("checked", true); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select name="priceSelect" id="priceSelect" class="form-control"> <option value="FTLW">Domestic Full Truck Load</option> <option value="PTLW">Domestic Partial Truck Load</option> <option value="FTL" selected>International</option> </select> </div> <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" name="sourceBtn" class="btn btn-lg" value="CN"><label for="sourceBtns1">CHINA</label> <input type="radio" id="sourceBtns2" name="sourceBtn" class="btn btn-lg" value="ID" ><label for="sourceBtns2">INDONESIA</label> <input type="radio" id="sourceBtns3" name="sourceBtn" class="btn btn-lg" value="TH" ><label for="sourceBtns3">THAILAND</label> <input type="radio" id="sourceBtns4" name="sourceBtn" class="btn btn-lg" value="US"><label for="sourceBtns4">UNITED STATES</label> </div>