如果复选框属性检查为真，则单击标签

Question

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

当复选框更改为 '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();
            }

        });

Answer 1

由于label是input checkbox的父元素，所以应该使用closest或parent方法。 find 用于搜索子元素。

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

Answer 2

像这样的？ 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.');
    });
});

Answer 3

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

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

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

如果复选框属性检查为真，则单击标签

Click Label if checkbox prop check is true

javascript

checkbox

jquery

siblings