影響基於主複選框選擇的輔助單選按鈕

Question

我有一組複選框和一組單選按鈕。它們分別是：

PRIMARY複選框

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

通過這樣做，有一個小問題。當我選擇冒險複選框時，突出顯示單選按鈕。但是，當我檢查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>

Answer 2

如果由於某種原因，你需要保持連接到複選框雙重事件監聽器，你必須只是一個律變化：

移動

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

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

爲什麼之前？

目前這樣做：

1. 你檢查＃THEME1和＃THEME2

2. 回調1執行

   2.1條件：是否THEME1和THEME2託運：

   YES - 然後選擇Adv Att

3. 執行回叫2

   3。1個條件：是THEME1檢查

   YES - 然後選擇的CuI ATT

所以，在你的代碼的回調1總是覆蓋回調1.

Answer 3

如前所述，你重複的回調正在加緊彼此。

想必您需要一個解決方案，您可以在配置其他軟件包時進行擴展。

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

好運：

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

}) 

你可以更多的東西，如打掃一下！