jQuery addClass example

Change class name on click in jQuery

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() {
				if($('input[name = custom_field_7]').attr('checked') == "checked") { 
        	//alert ((this.value));
          
          if ((this.value) == 'male' ) {
          	$('.custom_field_user_role option:eq(2)').attr('selected','selected');
          } else if ((this.value) == 'female' ) {
          	$('.custom_field_user_role option:eq(0)').attr('selected','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);
    }
});
	*/