Question

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

PRICARY CHECKBOXES

<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 CODE

$(':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);             
    }
})

通过以上操作，存在一个小问题。当我选择冒险复选框时， Cul Att 单选按钮会突出显示。但是，当我选中吸引力复选框以及冒险复选框时，我希望单选按钮现在位于高级辅助上。我将此作为上述jquery代码的一个条件，但它仍然无法工作。我究竟做错了什么？非常感谢任何帮助！

Answer 1

您不需要为.change元素提供双$(':checkbox')次事件。
您需要检查if 两个元素，如果不是，请检查第一个是否。

这是改变：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果由于某种原因你需要将双事件监听器附加到复选框，你必须只做一个小的改变：

移动

var listener = ref.on('value', function(snapshot) { 
    if (snapshot.exists()) {
        console.log('Value is now '+snapshot.val());
        ref.off('value', listener);
    }
});

之前

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

为什么？

目前你这样做：

您检查＃theme1和＃theme2
执行回调1

2.1条件：都检查了theme1和theme2：

是 - 然后选择高级专员
执行回调2

3.1条件：是否检查了theme1

是 - 然后选择 Cul Att

因此，在你的代码中，回调1总是覆盖回调1。

Answer 3

如前所述，您的重复回调是相互踩踏的。

据推测，您需要一个可以在配置其他软件包时进行扩展的解决方案。

$('[name=theme]:checkbox').change(function() {

  var combo1 = $('#theme1').is(":checked") && !$('#theme2').is(":checked"),
  combo2 = $('#theme1').is(":checked") && $('#theme2').is(":checked");

  if(combo1) $('#combo1').prop('checked',true);
  else if(combo2) $('#combo2').prop('checked', true);

})

你可以通过以下方式清理它：

$('[name=theme]:checkbox').change(function() {

  var combo;
  if($('#theme1').is(":checked") && !$('#theme2').is(":checked")){
    combo = $('#combo1');
  } 
  else if($('#theme1').is(":checked") && $('#theme2').is(":checked")){
    combo = $('#combo2');
  }

  combo.prop('checked',true);

})

https://plnkr.co/edit/8ynhEIYGb5IIAI3GiOkb?p=preview

祝你好运！

根据主要复选框选项影响辅助单选按钮

3 个答案: