Radio button check/ uncheck based on another radio group check/uncheck

Question

In a form there are 2 groups of radio buttons.

In the first group named Result, there are 4 option: id="ok", id="fa", id="fp", id="bp".

In the second group named ResultCategories, there are 9 option: id="cat1" .... id="cat9".

What I want:

a. If ok is clicked, ResultCategories will be unchecked (if already checked).

b. If fp or bp is clicked, cat9 of ResultCategories will be checked.

c. If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.

Here is the html:


  



  
    
      
        Quality Check
        
        
 
 

        
          
            
              Result:
                Ok  
                
                
                Fasle Alarm 
                
                
                False Pass  
                 
                 
                Blatant Pass  
                 
              
            
          
          

          
            Result Categories:
              
                Cat 1 
                 
                
                Cat 2 
                 
                
                Cat 3 
                 
                 
                Cat 4 
                 
                                
                Cat 5 
                 
                 Cat 6 
                
                                
                Cat 7 
                 
                 Cat 8 
                 
                                
                Cat 9

I know that this can be done by jQuery but I do not have much idea about jQuery. I have researched and tried different things. Here is what I tried last:

$(document).ready(function() {

  $('#ok').on('change', function() {
    alert($('input[name=Result]:checked', '#ok').val());

    if ($('input[name=Result]:checked', '#ok').val() == '1') {
      $('#ResultCategories').prop('checked', false);
    } else {


    }
  });

});

It gives an alert once ok is checked but it does not uncheck ResultCategories if already checked.

I have added a jQuery fiddle here: jQuery fiddle

I hope wise guys out there can help me solve the problem. Thanks in advance.

Rajan · Accepted Answer

Here is what it looks like:

$(document).ready(function() {

  $('input[name="Result"]').on('change', function() {
    var checked_val = $('input[name="Result"]:checked').val();
    if (checked_val == 1) {
      //If ok is clicked, ResultCategories will be unchecked (if already checked)
      $('input[name="ResultCategories"]').prop('checked', false);
    } else if (checked_val == 3 || checked_val == 4) {
      // If fp or bp is clicked, cat9 of ResultCategories will be checked.
      $('#cat9').prop('checked', true);

    }
  });

  $('input[name="ResultCategories"]').on('change', function() {
    var checked_val = $('input[name="ResultCategories"]:checked').val();
    if (checked_val >= 1 && checked_val <= 8) {
      //If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.
      $('#fa').prop('checked', true);
    }
  });

});


  



  
    
      
        Quality Check
        
        
 
 

        
          
            
              Result:
              Ok 
              
              Fasle Alarm    False Pass                 Blatant Pass   
          
          

          
            Result Categories:
              Cat 1    Cat 2                   Cat 3    Cat 4                   Cat 5    Cat 6                   Cat 7    Cat 8                   Cat 9

More compact jquery:

Fiddle

$(document).ready(function() {

  var result_dom = $('input[name="Result"]');
  var categories_dom = $('input[name="ResultCategories"]');
  var cat9 = $('#cat9');
  var fa = $('#fa')

  result_dom.on('change', function() {
    var checked_val = $(this).val();
    if (checked_val == 1) {
      categories_dom.prop('checked', false);
    } else if (checked_val == 3 || checked_val == 4) {
      cat9.prop('checked', true);
    }
  });

  categories_dom.on('change', function() {
    var checked_val = $(this).val();
    if (checked_val >= 1 && checked_val <= 8) {
      fa.prop('checked', true);
    }
  });

});

Radio button check/ uncheck based on another radio group check/uncheck

Answers (2)

Here is what it looks like:

More compact jquery:

Related Questions