jQuery addClass example

Change class name on click in jQuery

by Twisty

HTML

<ul>
  <li id="wppb-form-element-23">
    <label for="custom_field_7">Your sex:</label>
    <ul class="wppb-radios">
      <li>
        <input value="female" id="female_23" name="custom_field_7" type="radio" required="" checked="">
        <label for="female_23">Female</label>
      </li>
      <li>
        <input value="male" id="male_23" name="custom_field_7" type="radio" required="">
        <label for="male_23">Male</label>
      </li>
    </ul>
  </li>
  <li id="wppb-form-element-25">
    <label for="custom_field_9">Yout age:</label>
    <input name="custom_field_9" type="number" id="custom_field_9" value="12" required="">
  </li>
  <li id="wppb-form-element-18">
    <label for="custom_field_1">Have you suffered?</label>
    <ul>
      <li>
        <input value="1" id="1_18" name="custom_field_1" type="radio" required="">
        <label for="1_18">Yes</label>
      </li>
      <li>
        <input value="0" id="0_18" name="custom_field_1" type="radio" required="">
        <label for="0_18">No</label>
      </li>
    </ul>
  </li>
  <li id="wppb-form-element-27">
    <label for="custom_field_user_role">Select role:</label>
    <select name="custom_field_user_role" id="" class="custom_field_user_role" required="">
      <option value="recommandation1" selected="selected">recommandation 1</option>
      <option value="recommandation2">recommandation 2</option>
      <option value="recommandation3">recommandation 3</option>
    </select>
  </li>
</ul>

JavaScript

$(function() {
  $("input[name='custom_field_7']").change(function(e) {
    console.log("input[name='custom_field_7'] - Event: " + e.type);
    $("input[name='custom_field_7']").each(function(i, el) {
      if ($(el).is(":checked") && $(el).val() == 'male') {
        $('.custom_field_user_role > option:eq(2)').prop('selected', true);
        console.log(".custom_field_user_role opt(2) selected");
      }
      if ($(el).is(":checked") && $(el).val() == 'female') {
        $('.custom_field_user_role > option:eq(0)').prop('selected', true);
        console.log(".custom_field_user_role opt(0) selected");
      }
    });
  });
});


/*
$(function() { 
$('input[name=custom_field_7]').change(function() { 
       		 var up_sex = (this.value);
           
          return (up_sex);
    	  });
		
    if (!$("input[name='custom_field_7']:checked").val()) {
      	$('input[name=custom_field_7]').change(function() { 
       		 var up_sex = (this.value);
           
          alert (up_sex);
    	  });
    } else {
     var up_sex = $("input[name='custom_field_7']:checked").val();
     
     alert (up_sex);
    }
});
	*/