javascript - 选中一个复选框后取消选中其他复选框

Question

好吧，我一直在为 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) 运算符的错误，说明了一些未指定的内容。

Answer 1

我们的项目中有类似的要求，我们使用单选按钮。只需按照您的风格指南更改样式即可。

注意:所有单选按钮输入必须具有相同的名称。