如果复选框道具检查为真，请单击标签答案

【问题标题】：Click Label if checkbox prop check is true如果复选框道具检查为真，请单击标签
【发布时间】：2015-01-29 16:11:33
【问题描述】：

默认情况下所有复选框均未选中。我不能在问题中使用单选按钮。

当复选框更改为'checked' 时，查看是否有任何兄弟复选框是'checked'，如果是则.click() 是复选框的父<label>。

我必须 .click() <label> 因为连接的 API 正在监听标签上的点击，$('input').prop("checked", false); 似乎不起作用。

结构如下：

<div class="feature-filter">
  <div id="filterHandle">Product Filter</div>
  <label class="featureLabel">
    <input class="featureCheck" type="checkbox">
    Original Pouch
  </label>
  <label class="featureLabel">
    <input class="featureCheck" type="checkbox">
    Original Can
  </label>
  <label class="featureLabel">
    <input class="featureCheck" type="checkbox">
    Gold Pouch
  </label>
  <label class="featureLabel">
    <input class="featureCheck" type="checkbox">
    Gold Can
  </label>
  <label class="featureLabel">
    <input class="featureCheck" type="checkbox">
    Menthol Pouch
  </label>
  <label class="featureLabel">
    <input class="featureCheck" type="checkbox">
    Menthol Can
  </label>
</div>

这是我尝试过的，但它是错误的。

       $('.featureCheck').click(function(){

            if $('.featureCheck').siblings().prop('checked',true){
                this.find('label').click();
            }

        });

【问题讨论】：

这一行让我很困惑："当一个复选框被更改为“已选中”时，请查看是否有任何兄弟复选框被“选中”，如果是，则 .click()复选框的父。" - 哪个复选框？
如果只能选中一个复选框，则应该使用单选框。
billyone 可以单击选中复选框的父标签，但不能单击刚刚单击的复选框的标签。 Arjan 我尝试了单选按钮，但第三方 API 正在标签中寻找复选框，因此单选不起作用。
您的if 声明无效。

标签： javascript jquery checkbox siblings

【解决方案1】：

听起来你想要这样的东西：

$('.featureCheck').change(function() {
  if (this.checked) {
    $('.featureCheck').not(this).filter(':checked').closest('.featureLabel').click();
  }
});

因此，如果您选中一个复选框，则找到其他已选中的复选框，并在其父 label 上触发点击事件

【讨论】：

【解决方案2】：

由于标签是输入框的父元素，你应该使用closest或parent方法。 find 用于搜索子元素。

$(this).closest('.featureLabel').click();

【讨论】：

【解决方案3】：

像这样？ http://jsfiddle.net/swm53ran/175/

<div class="feature-filter">
    <div id="filterHandle">Product Filter</div>
    <div class="item">
        <input class="featureCheck" type="checkbox"/>
        <label class="featureLabel">
            Original Pouch
        </label>
    </div>
    <div class="item">        
        <input class="featureCheck" type="checkbox"/>
        <label class="featureLabel">
            Original Can
        </label>
    </div>
    <div class="item">        
        <input class="featureCheck" type="checkbox"/>
        <label class="featureLabel">
            Gold Pouch
        </label>
    </div>
    <div class="item">
        <input class="featureCheck" type="checkbox"/>
        <label class="featureLabel">
            Gold Can
        </label>
    </div>
    <div class="item">
        <input class="featureCheck" type="checkbox"/>
        <label class="featureLabel">
            Menthol Pouch
        </label>
    </div>
    <div class="item">
        <input class="featureCheck" type="checkbox"/>
        <label class="featureLabel">
            Menthol Can
        </label>
    </div>
</div>

$(document).ready(function() {
    $('.featureCheck').on('click', function() {
        console.log($('.featureCheck:checked').length);
        if ($(this).is(':checked')) { //if checkbox is checked and more than 1 are checked
            if($('.featureCheck:checked').length > 1) {
                $(this).closest('.item').find('.featureLabel').click();
            }
        }
    });
    $('.featureLabel').on('click', function() {
        alert('the feature label: ' + $(this).text() + ' was clicked.');
    });
});

【讨论】：