取消勾選其他複選框，當選中一個時

好的我一直在爲WordPress構建這個營養插件，試圖找到一個解決方案，這個簡單的任務，幾行js應該工作....只是取消其他複選框當一個被檢查。取消勾選其他複選框，當選中一個時

我有4個輸入的嵌套div的按本：

<div class="nutrition-mc-group nutrition-mc-group-activity-level"> 
 
    <div class="nutrition-mc-selection-box"> 
 
    <div class="nutrition-mc-checkbox-outter"> 
 
     <input type="checkbox" id="squared-checkbox1"> 
 
     <label class="nutrition-mc-checkbox" id="mc-sedentary-select" for="squared-checkbox1"></label> 
 
    </div> 
 
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Sedentary</p> 
 
    <p class="nutrition-mc-description">Typical desk job/Sitting most of the day</p> 
 
    </div> 
 
    <div class="nutrition-mc-selection-box"> 
 
    <div class="nutrition-mc-checkbox-outter"> 
 
     <input type="checkbox" id="squared-checkbox2"> 
 
     <label class="nutrition-mc-checkbox" id="mc-lightly-active-select" for="squared-checkbox2"></label> 
 
    </div> 
 
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Lightly Active </p> 
 
    <p class="nutrition-mc-description">Walking around a good amount, retail jobs</p> 
 
    </div> 
 
    <div class="nutrition-mc-selection-box"> 
 
    <div class="nutrition-mc-checkbox-outter"> 
 
     <input type="checkbox" id="squared-checkbox3"> 
 
     <label class="nutrition-mc-checkbox" id="mc-moderately-active-select" for="squared-checkbox3"></label> 
 
    </div> 
 
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Moderately Active</p> 
 
    <p class="nutrition-mc-description">Walking constantly in a fast paced environment, waiting tables</p> 
 
    </div> 
 
    <div class="nutrition-mc-selection-box"> 
 
    <div class="nutrition-mc-checkbox-outter"> 
 
     <input type="checkbox" id="squared-checkbox4"> 
 
     <label class="nutrition-mc-checkbox" id="mc-vigorously-active-select" for="squared-checkbox4"></label> 
 
    </div> 
 
    <p class="nutrition-mc-notes nutrition-mc-notes-switch">Vigorously Active</p> 
 
    <p class="nutrition-mc-description">Very labor intensive, construction workers</p> 
 
    </div> 
 
</div>

現在的JS是有一點不同，我試圖簡化它儘可能：

this.allActive = this.mod.find('.nutrition-mc-group-activity-level input');  

_init: function(){ 
     this.allActive.on('change', $.proxy(this._uncheckActivityBtn, this)); 
}, 
_uncheckActivityBtn: function(){ 
     $(this.allActive).not(this).prop('checked', false); 
},

它運行良好，但它像它不認識not(this)部分參數。如果我將.prop更改爲true，它會更改參數，並在檢查一個參數時檢查所有輸入。我不知道爲什麼它不理解this參數的一部分，並且不排除當前選中的框。

我試圖只移動一個函數中的所有內容，但是在執行調試時，輸出給not（this）操作符提供了一個錯誤，並指出它沒有被指定。

來源

2017-02-22 David

對於這種行爲，它聽起來像你只需要使用單選按鈕，而不是複選框。當所有輸入具有相同的'name'屬性時，默認情況下會發生這種行爲 –

是的......請使用單選按鈕來執行此行爲 –

我們在項目中有類似的要求，我們用單選按鈕打開。根據你的風格指南改變造型。

注意：所有單選按鈕輸入必須具有相同的名稱。

來源

2017-02-22 10:45:00

我剛剛嘗試使用帶有收音機類型的輸入，並且它仍然執行類似的操作它只是沒有識別代碼中的'not（this）'部分，如果我從'true'切換到'false'，它只是將它們全部都檢查爲非（如果設置爲默認選中）。 – David

如果您使用單選按鈕，則不需要「not（this）」代碼。 –

仍然不起作用:(與單選按鈕不同的東西不介意你，當我打開它們時他們不會關掉，我關掉了所有的js，看看是否有影響它的東西，它仍然不起作用。不知道爲什麼會這樣。 – David

取消勾選其他複選框，當選中一個時

回答

相關問題