这是它的样子：

Question

在表单中，有2组单选按钮。

在名为结果的第一组中，有4个选项：id =“ ok”，id =“ fa”，id =“ fp”，id =“ bp”。

在名为 ResultCategories 的第二个组中，有9个选项：id =“ cat1” .... id =“ cat9”。

我想要什么：

a。如果单击确定，则ResultCategories将被取消选中（如果已选中）。

b。如果单击 fp或bp ，将检查ResultCategories的cat9。

c。如果单击ResultCategories的 cat1到cat8之一，则会检查 fa的结果。

这是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>

我知道这可以通过jQuery完成，但是我对jQuery不太了解。我研究并尝试了不同的方法。这是我上次尝试的步骤：

$(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 {


    }
  });

});

一旦选中“ OK”，它将发出警报，但如果已经选中，则不会取消选中“ ResultCategories”。

我在这里添加了一个jQuery小提琴：jQuery fiddle

我希望那里的智者可以帮助我解决问题。预先感谢。

Answer 1

这是它的样子：

$(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>

更紧凑的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);
    }
  });

});

Answer 2

这是使用纯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');

如果已检查cats中的某些内容并单击了ok，请取消选中cat

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

如果已选中fp，请同时选中cat9。

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

如果已选中bp，请同时选中cat9。

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

如果已选中cat1-cat8，请同时选中fa。

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

这是完整的解决方案。

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>

基于另一个单选按钮组的单选按钮选中/取消选中

2 个答案:

这是它的样子：

更紧凑的jquery：