Question

好的，我一直在为wordpress构建这个营养插件，试图为这个简单的任务找到一个解决方案，几行j应该可以工作....只需在选中一个时取消选中其他复选框。

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

我们的项目有类似的要求，我们出现了使用单选按钮。只需根据您的风格指南更改样式。

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

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

1 个答案: