取消勾选其他复选框，当选中一个时

好的我一直在为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

取消勾选其他复选框，当选中一个时

回答

相关问题