title: Radio button check/ uncheck based on another radio group check/uncheck
body: <p>In a form there are 2 groups of radio buttons.</p>
  
  <p>In the first group named <strong>Result</strong>, there are 4 option: id="ok", id="fa", id="fp", id="bp".</p>
  
  <p>In the second group named <strong>ResultCategories</strong>, there are 9 option: id="cat1" .... id="cat9".</p>
  
  <p>What I want:</p>
  
  <p>a. If <strong>ok is clicked</strong>, ResultCategories will be unchecked (if already checked).</p>
  
  <p>b. If <strong>fp or bp is clicked</strong>, cat9 of ResultCategories will be checked.</p>
  
  <p>c. If one of the <strong>cat1 to cat8 of ResultCategories is clicked</strong>, <strong>fa of Result</strong> will be checked.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;form action="" method="POST"&gt;
        &lt;fieldset class="scheduler-border"&gt;
          &lt;legend class="scheduler-border"&gt;Quality Check&lt;/legend&gt;
          &lt;div style="float: right;"&gt;&lt;button type="submit" id="submit" name="submit" class="btn btn-info"&gt;Complete&lt;/button&gt;&lt;/div&gt;
          &lt;br /&gt; &lt;br /&gt; &lt;br /&gt;
          &lt;div class="row"&gt;
            &lt;div class="column"&gt;
              &lt;div id="Result"&gt;
                &lt;label&gt;Result:&lt;/label&gt;
                  &lt;label class="radioContainer"&gt;Ok &lt;input type="radio" name="Result" id ="ok" value="1" /&gt; 
                  &lt;span class="circle"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;label class="radioContainer"&gt;Fasle Alarm &lt;input type="radio" name="Result" id="fa" value="2" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;label class="radioContainer"&gt;False Pass &lt;input type="radio" name="Result" id="fp" value="3" /&gt; 
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt; 
                  &lt;label class="radioContainer"&gt;Blatant Pass &lt;input type="radio" name="Result" id="bp" value="4" /&gt; 
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;br /&gt;
            &lt;div class="column"&gt;
              &lt;div id="ResultCategories"&gt;&lt;label&gt;Result Categories:&lt;/label&gt;
                &lt;div&gt;
                  &lt;label class="radioContainer"&gt;Cat 1 &lt;input type="radio" name="ResultCategories" id="cat1" value="1" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt;
                  &lt;label class="radioContainer"&gt;Cat 2 &lt;input type="radio" name="ResultCategories" id="cat2" value="2" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt;
                  &lt;label class="radioContainer"&gt;Cat 3 &lt;input type="radio" name="ResultCategories" id="cat3" value="3" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt; 
                  &lt;label class="radioContainer"&gt;Cat 4 &lt;input type="radio" name="ResultCategories" id="cat4" value="4" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt;                
                  &lt;label class="radioContainer"&gt;Cat 5 &lt;input type="radio" name="ResultCategories" id="cat5" value="5" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt; &lt;label class="radioContainer"&gt;Cat 6 &lt;input type="radio" name="ResultCategories" id="cat6" value="6" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt;
                  &lt;/label&gt;                
                  &lt;label class="radioContainer"&gt;Cat 7 &lt;input type="radio" name="ResultCategories" id="cat7" value="7" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt; &lt;label class="radioContainer"&gt;Cat 8 &lt;input type="radio" name="ResultCategories" id="cat8" value="8" /&gt;
                  &lt;span class="circle"&gt;&lt;/span&gt; 
                  &lt;/label&gt;                
                  &lt;label class="radioContainer"&gt;Cat 9 &lt;input type="radio" name="ResultCategories" id="cat9" value="9" /&gt; 
                  &lt;span class="circle"&gt;&lt;/span&gt;
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$(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 {
  
  
      }
    });
  
  });
  </code></pre>
  
  <p>It gives an alert once ok is checked but it does not uncheck ResultCategories if already checked.</p>
  
  <p>I have added a jQuery fiddle here: <a href="https://jsfiddle.net/rk1tw6q3/30/" rel="nofollow noreferrer">jQuery fiddle</a></p>
  
  <p>I hope wise guys out there can help me solve the problem.
  Thanks in advance.</p>