Wes Loflin Wes Loflin - 1 month ago 18
HTML Question

jQuery Change radio button on select box change

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

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>