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

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

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

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

Answer 2

由于标签是输入复选框的父元素，因此您应使用closest或parent方法。 find用于搜索子元素。

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

Answer 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.');
    });
});

如果复选框prop检查为true，请单击Label

3 个答案: