Question

Automatically Checking a Checkbox with Drop Down - Issues With Code

Forms

Updated April 6, 2018

asked on June 28, 2017

I have a form for a client that needs to have checkboxes checked when a selection is made from a drop down. I have the following code:

$(document).ready(function() {
  
$("#Field8").change(function() {
  var text = $('#Field8 :selected').text();
  $('#Field21-0, #Field34-0, #Field35-0').prop('checked', text === 'Injury');
  $('#Field18-0').prop('checked', text === 'Near Miss');
  $('#Field19-0').prop('checked', text === 'Moving Violation');
  $('#Field22-0, #Field35-0').prop('checked', text === 'Subcontractor');
  $('#Field23-0, #Field35-0').prop('checked', text === 'Property');
});
});

This does the job for each individual drop down selection, but if the field is repeated in another line it won't show up. For example, when I select 'Injury' from the drop down, 'Field35-0' does not get checked, but does get checked when I select 'Property' even though it belongs to both and should be checked. I'm not sure why the code is behaving like this.

I've tried separating out the code and repeating the whole process but it ends up with the same result as I described. I'm a newbie at scripting and I'm sure there is some line here that I am missing.

0 0

Answer

SELECTED ANSWER

replied on June 29, 2017

I re-worked the code and added in a switch case, this works exactly as it should now. Thank you for your input!

$(document).ready(function() {  
  
$("#Field8").change(function() {
 var text = $('#Field8 :selected').text();
 $("input[type='checkbox']").prop('checked', false);
  switch(text) {
   case 'Injury':
     $('#Field21-0, #Field34-0, #Field35-0').prop('checked', true);
     break;
   case 'Moving Violation':
     $('#Field19-0').prop('checked', true);
     break;
   case 'Near Miss':
     $('#Field18-0').prop('checked', true);
     break;
   case 'Property':
     $('#Field23-0, #Field35-0').prop('checked', true);
     break;
   case 'Subcontractor':
     $('#Field22-0, #Field35-0').prop('checked', true);
     break;
   }
  });
});

0 0

Replies

replied on June 28, 2017

For #Field35-0, with 'Injury' selected, $('#Field21-0, #Field34-0, #Field35-0').prop('checked', text === 'Injury') changes its property 'checked' to true, then $('#Field22-0, #Field35-0').prop('checked', text === 'Subcontractor') changes its property 'checked' to false, so it's still false after the whole block. 'Property' works because it's on the last line.

Note that the second parameter in $().prop( propertyName, value ) is the value to be set on the property.

1 0

SELECTED ANSWER

replied on June 29, 2017

I re-worked the code and added in a switch case, this works exactly as it should now. Thank you for your input!

$(document).ready(function() {  
  
$("#Field8").change(function() {
 var text = $('#Field8 :selected').text();
 $("input[type='checkbox']").prop('checked', false);
  switch(text) {
   case 'Injury':
     $('#Field21-0, #Field34-0, #Field35-0').prop('checked', true);
     break;
   case 'Moving Violation':
     $('#Field19-0').prop('checked', true);
     break;
   case 'Near Miss':
     $('#Field18-0').prop('checked', true);
     break;
   case 'Property':
     $('#Field23-0, #Field35-0').prop('checked', true);
     break;
   case 'Subcontractor':
     $('#Field22-0, #Field35-0').prop('checked', true);
     break;
   }
  });
});

0 0

replied on April 6, 2018

I am trying to accomplish something similar, by checking a box upon a text value 'True.' Shouldn't the following accomplish this?

$("#Field40").change(function() {
 		var text = $('#Field40 :selected').text('True');
 		$("Field39-0[type='checkbox']").prop("checked", true);
	});

I appreciate your help.

0 0

You are not allowed to follow up in this post.

Question

Question

Automatically Checking a Checkbox with Drop Down - Issues With Code

Answer

Replies

Sign in to reply to this post.