stackoom
  简体   繁体   中英

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

 原文  2018-07-16 05:44:37  0   2    javascript/ jquery/ html

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: 

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <form action="" method="POST">
      <fieldset class="scheduler-border">
        <legend class="scheduler-border">Quality Check</legend>
        <div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
        <br /> <br /> <br />
        <div class="row">
          <div class="column">
            <div id="Result">
              <label>Result:</label>
                <label class="radioContainer">Ok <input type="radio" name="Result" id ="ok" value="1" /> 
                <span class="circle"></span>
                </label>
                <label class="radioContainer">Fasle Alarm <input type="radio" name="Result" id="fa" value="2" />
                <span class="circle"></span>
                </label>
                <label class="radioContainer">False Pass <input type="radio" name="Result" id="fp" value="3" /> 
                <span class="circle"></span> 
                </label> 
                <label class="radioContainer">Blatant Pass <input type="radio" name="Result" id="bp" value="4" /> 
                <span class="circle"></span> 
              </label>
            </div>
          </div>
          <br />
          <div class="column">
            <div id="ResultCategories"><label>Result Categories:</label>
              <div>
                <label class="radioContainer">Cat 1 <input type="radio" name="ResultCategories" id="cat1" value="1" />
                <span class="circle"></span> 
                </label>
                <label class="radioContainer">Cat 2 <input type="radio" name="ResultCategories" id="cat2" value="2" />
                <span class="circle"></span> 
                </label>
                <label class="radioContainer">Cat 3 <input type="radio" name="ResultCategories" id="cat3" value="3" />
                <span class="circle"></span> 
                </label> 
                <label class="radioContainer">Cat 4 <input type="radio" name="ResultCategories" id="cat4" value="4" />
                <span class="circle"></span> 
                </label>                
                <label class="radioContainer">Cat 5 <input type="radio" name="ResultCategories" id="cat5" value="5" />
                <span class="circle"></span> 
                </label> <label class="radioContainer">Cat 6 <input type="radio" name="ResultCategories" id="cat6" value="6" />
                <span class="circle"></span>
                </label>                
                <label class="radioContainer">Cat 7 <input type="radio" name="ResultCategories" id="cat7" value="7" />
                <span class="circle"></span> 
                </label> <label class="radioContainer">Cat 8 <input type="radio" name="ResultCategories" id="cat8" value="8" />
                <span class="circle"></span> 
                </label>                
                <label class="radioContainer">Cat 9 <input type="radio" name="ResultCategories" id="cat9" value="9" /> 
                <span class="circle"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</body>

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.

2 answers

solution1
 2 ACCPTED  2018-07-16 06:10:41

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); } }); }); 
 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> </head> <body> <div class="container"> <form action="" method="POST"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Quality Check</legend> <div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div> <br /> <br /> <br /> <div class="row"> <div class="column"> <div id="Result"> <label>Result:</label> <label class="radioContainer">Ok <input type="radio" name="Result" id ="ok" value="1" /> <span class="circle"></span> </label> <label class="radioContainer">Fasle Alarm <input type="radio" name="Result" id="fa" value="2" /> <span class="circle"></span> </label> <label class="radioContainer">False Pass <input type="radio" name="Result" id="fp" value="3" /> <span class="circle"></span> </label> <label class="radioContainer">Blatant Pass <input type="radio" name="Result" id="bp" value="4" /> <span class="circle"></span> </label></div> </div> <br /> <div class="column"> <div id="ResultCategories"><label>Result Categories:</label> <div><label class="radioContainer">Cat 1 <input type="radio" name="ResultCategories" id="cat1" value="1" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 2 <input type="radio" name="ResultCategories" id="cat2" value="2" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 3 <input type="radio" name="ResultCategories" id="cat3" value="3" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 4 <input type="radio" name="ResultCategories" id="cat4" value="4" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 5 <input type="radio" name="ResultCategories" id="cat5" value="5" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 6 <input type="radio" name="ResultCategories" id="cat6" value="6" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 7 <input type="radio" name="ResultCategories" id="cat7" value="7" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 8 <input type="radio" name="ResultCategories" id="cat8" value="8" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 9 <input type="radio" name="ResultCategories" id="cat9" value="9" /> <span class="circle"></span> </label></div> </div> </div> </div> </fieldset> </form> </div> </body>

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);
    }
  });

});

solution2
 1  2018-07-16 06:32:31

Here is a solution using plain JavaScript. 

const ok = document.querySelector('#ok');
const categoriesWrapper = document.querySelector('#ResultCategories');
const fp = document.querySelector('#fp');
const bp = document.querySelector('#bp');
const fa = document.querySelector('#fa');

If something in cats has been checked and ok is clicked, uncheck the cat 

ok.addEventListener('click', (event) => {
  const checked = categoriesWrapper.querySelector('input:checked');
  if (checked) {
    categoriesWrapper.querySelector('input:checked').checked = false;
  }
});

If fp has been checked, check cat9 as well. 

fp.addEventListener('click', (event) => {
  categoriesWrapper.querySelector('#cat9').checked = true;
});

If bp has been checked, check cat9 as well. 

bp.addEventListener('click', (event) => {
  categoriesWrapper.querySelector('#cat9').checked = true;
});

If cat1-cat8 has been checked, check fa as well. 

categoriesWrapper.addEventListener('click', (event) => {
  if (event.target.id !== 'cat9') {
    fa.checked = true;
  }
});

Here is the complete solution. 

 const ok = document.querySelector('#ok'); const categoriesWrapper = document.querySelector('#ResultCategories'); const fp = document.querySelector('#fp'); const bp = document.querySelector('#bp'); const fa = document.querySelector('#fa'); ok.addEventListener('click', (event) => { const checked = categoriesWrapper.querySelector('input:checked'); if (checked) { categoriesWrapper.querySelector('input:checked').checked = false; } }); fp.addEventListener('click', (event) => { categoriesWrapper.querySelector('#cat9').checked = true; }); bp.addEventListener('click', (event) => { categoriesWrapper.querySelector('#cat9').checked = true; }); categoriesWrapper.addEventListener('click', (event) => { if (event.target.id !== 'cat9') { fa.checked = true; } }); 
  <div class="container"> <form action="" method="POST"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Quality Check</legend> <div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div> <br /> <br /> <br /> <div class="row"> <div class="column"> <div id="Result"> <label>Result:</label> <label class="radioContainer">Ok <input type="radio" name="Result" id ="ok" value="1" /> <span class="circle"></span> </label> <label class="radioContainer">Fasle Alarm <input type="radio" name="Result" id="fa" value="2" /> <span class="circle"></span> </label> <label class="radioContainer">False Pass <input type="radio" name="Result" id="fp" value="3" /> <span class="circle"></span> </label> <label class="radioContainer">Blatant Pass <input type="radio" name="Result" id="bp" value="4" /> <span class="circle"></span> </label> </div> </div> <br /> <div class="column"> <div id="ResultCategories"><label>Result Categories:</label> <div> <label class="radioContainer">Cat 1 <input type="radio" name="ResultCategories" id="cat1" value="1" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 2 <input type="radio" name="ResultCategories" id="cat2" value="2" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 3 <input type="radio" name="ResultCategories" id="cat3" value="3" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 4 <input type="radio" name="ResultCategories" id="cat4" value="4" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 5 <input type="radio" name="ResultCategories" id="cat5" value="5" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 6 <input type="radio" name="ResultCategories" id="cat6" value="6" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 7 <input type="radio" name="ResultCategories" id="cat7" value="7" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 8 <input type="radio" name="ResultCategories" id="cat8" value="8" /> <span class="circle"></span> </label> <label class="radioContainer">Cat 9 <input type="radio" name="ResultCategories" id="cat9" value="9" /> <span class="circle"></span> </label> </div> </div> </div> </div> </fieldset> </form> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question if condition on radio button check/uncheck Need to check uncheck then check for radio button to work Issue with check/uncheck Radio button based on condition using jQuery How to check/uncheck radio button on click? Check/uncheck radio button using javascript and html How to make click radio button check and uncheck Radio button check and uncheck onclick and send data jQuery check/uncheck radio button onclick Check/Uncheck radio buttons JavaScript check/uncheck radio input with javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM