Question

我有一个类添加了一个假的复选框并使用jQuery，一旦用户点击它，将选中的状态类添加到伪复选框。

CSS

.fake-checkbox {  /* ... */  }
.fake-checkbox.checked-state {  /* ... */  }

HTML

<label>
  <input type="checkbox">
  <div class="fake-checkbox"></div>
</label>

JS

(function($) {
  $('.fake-checkbox').click(function() {
    // Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
    if ($(this).hasClass('checked-state')) {
      $(this).removeClass('checked-state');
    } else {
      $(this).addClass('checked-state');
    }
  });
}(jQuery));

现在，我还希望在添加类的同时使输入复选框处于已检查状态，并在删除类时将其置于未选中状态。

我知道这可以用element.checked = true完成，但不能在jQuery中完成。

我怎么能做到这一点？

修改

这肯定是不同的，并不是这个question的重复，因为我们处于不同的情况，尽管有一个相似的'使用jQuery勾选一个复选框'，但仍然不是可能重复。

感谢。

Answer 1

除了jQuery的答案之外，我还建议（这个特定情况）只有CSS解决方案，因为复选框和.fake-checkbox是兄弟姐妹。

<强> CSS

.fake-checkbox {  /* ... */  }
:checked + .fake-checkbox{  /* ... */  }

<强> HTML

<label>
  <input type="checkbox">
  <div class="fake-checkbox"></div>
</label>

<强>演示

.fake-checkbox {  color:#ccc;  }
:checked + .fake-checkbox{  color:green;  }

<label>
  <input type="checkbox">
  <div class="fake-checkbox">fake</div>
</label>

至于jQuery的答案，我建议您监控实际复选框的状态，而不是手动测试状态。

$('label :checkbox').on('change', function(){
  $(this)
    .siblings('.fake-checkbox')
    .toggleClass('checked-state', this.checked);
})

<强>演示

$('label :checkbox').on('change', function(){
  $(this)
    .siblings('.fake-checkbox')
    .toggleClass('checked-state', this.checked);
})

.fake-checkbox {  color:#ccc;  }
.fake-checkbox.checked-state {  color:green;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  <input type="checkbox">
  <div class="fake-checkbox">fake</div>
</label>

Answer 2

试试这个

$('#yourCheckboxSelector').prop('checked', true);

Answer 3

您可以使用JQuery检查复选框。使用prop方法。 https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/

使用此

<强> HTML

<label>
  <input id="real-checkbox" type="checkbox">
  <div class="fake-checkbox"></div>
</label>

<强> JS

(function($) {
  $('.fake-checkbox').click(function() {
    // Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.  
    if ($(this).hasClass('checked-state')) {
        $(this).removeClass('checked-state');      
        $( "#real-checkbox" ).prop( "checked", false );
    } else {
        $(this).addClass('checked-state');
        $( "#real-checkbox" ).prop( "checked", true );
    }
  });
}(jQuery));

Answer 4

由于checkbox在兄弟姐妹之前，您可以使用.prev()然后使用.prop()方法设置属性

(function($) {
  $('.fake-checkbox').click(function() {
    // Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.  
    if ($(this).hasClass('checked-state')) {
        $(this).removeClass('checked-state');      
        $(this).prev(':checkbox').prop('checked', false);
    } else {
        $(this).addClass('checked-state');
        $(this).prev(':checkbox').prop('checked', true);
    }
  });
}(jQuery));

以上代码可以简化为

(function($) {
  $('.fake-checkbox').click(function() {
    $(this).toggleClass('checked-state');
    $(this).prev(':checkbox').prop('checked', $(this).hasClass('checked-state'));
  });
}(jQuery));

如果element hasClass，请使用jQuery选中复选框

4 个答案: