javascript - 根据主要复选框选择影响辅助单选按钮

Question

我有一组复选框和一组单选按钮。它们如下:

主要复选框

<input class="filter" type="checkbox" id="theme1" name="theme" value="adventure">
<label for="theme1">Adventure</label>
<input class="filter" type="checkbox" id="theme2" name="theme" value="attraction">
<label for="theme2">Attraction</label>
<input class="filter" type="checkbox" id="theme3" name="theme" value="leisure">
<label for="theme3">Leisure</label>
<input class="filter" type="checkbox" id="theme4" name="theme" value="culture">
<label for="theme4">Culture</label>
<input class="filter" type="checkbox" id="theme5" name="theme" value="nature">
<label for="theme5">Nature</label>

辅助单选按钮

<input class="filter combo" type="radio" id="combo1" name="combo">
<label for="combo1">Adv Att</label>
<input class="filter combo" type="radio" id="combo2" name="combo">
<label for="combo2">Cul Att</label>
<input class="filter combo" type="radio" id="combo3" name="combo">
<label for="combo3">Adv Nat</label>
<input class="filter combo" type="radio" id="combo4" name="combo">
<label for="combo4">Att Lei</label>

JQUERY 代码

$(':checkbox').change(function() {
    if ($('#theme1').is(":checked") && $('#theme2').is(":checked")) {
        $('#combo1').prop('checked', true);
    }
})
$(':checkbox').change(function() {
    if ($('#theme1').is(":checked")) {
        $('#combo2').prop('checked', true);             
    }
})

通过执行上述操作，出现了一个小问题。当我选择 Adventure 复选框时，Cul Att 单选按钮会突出显示。但是，当我选中 Attraction 复选框和 Adventure 复选框时，我希望单选按钮现在位于 Adv Att 上。我将此作为上面 jquery 代码的条件，但它仍然无法正常工作。我究竟做错了什么？非常感谢任何帮助!

Answer 1

1. $(':checkbox') 元素不需要双重 .change 事件。
2. 您需要检查两个 元素是否被选中，如果没有- 检查第一个元素是否被选中。

这里是变化:

$(':checkbox').change(function() {
  if ($('#theme1').is(":checked") && $('#theme2').is(":checked")) {
    $('#combo1').prop('checked', true);
  } else if ($('#theme1').is(":checked")) {
    $('#combo2').prop('checked', true);             
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="filter" type="checkbox" id="theme1" name="theme" value="adventure">
<label for="theme1">Adventure</label>
<input class="filter" type="checkbox" id="theme2" name="theme" value="attraction">
<label for="theme2">Attraction</label>
<input class="filter" type="checkbox" id="theme3" name="theme" value="leisure">
<label for="theme3">Leisure</label>
<input class="filter" type="checkbox" id="theme4" name="theme" value="culture">
<label for="theme4">Culture</label>
<input class="filter" type="checkbox" id="theme5" name="theme" value="nature">
<label for="theme5">Nature</label>


<input class="filter combo" type="radio" id="combo1" name="combo">
<label for="combo1">Adv Att</label>
<input class="filter combo" type="radio" id="combo2" name="combo">
<label for="combo2">Cul Att</label>
<input class="filter combo" type="radio" id="combo3" name="combo">
<label for="combo3">Adv Nat</label>
<input class="filter combo" type="radio" id="combo4" name="combo">
<label for="combo4">Att Lei</label>