Javascript 如果元素hasClass，请使用jQuery选中复选框

我有一个类，它添加了一个假复选框，并使用jQuery，一旦用户单击它，就将checked state类添加到假复选框中

CSS

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

(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));

(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));

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

HTML

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

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

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

现在，我还想使输入复选框在添加类时处于选中状态，在删除类时处于未选中状态

我知道这可以用

element.checked=true

完成，但不能用jQuery

我怎样才能做到这一点

编辑

这肯定是不同的，不是重复的，因为我们在不同的情况下，虽然“使用jQuery勾选复选框”有相似之处，但仍然不是可能的重复

谢谢。

试试这个

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

试试这个

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

---

可以使用JQuery选中复选框。 使用prop方法。

用这个

HTML

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

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

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

---

可以使用JQuery选中复选框。 使用prop方法。

用这个

HTML

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

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

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

---

由于

复选框

紧跟在同级之前，因此可以使用然后使用方法设置属性

以上代码可以简化为

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

---

由于

复选框

紧跟在同级之前，因此可以使用然后使用方法设置属性

以上代码可以简化为

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

---

除了jQuery的答案之外，我还想建议（对于这个特定的例子）一个只使用CSS的解决方案，因为复选框和

.fake复选框是兄弟

CSS

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

(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));

(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));

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

HTML

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

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

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


伪造的
除了jQuery的答案之外，我还想建议（对于这个特定的例子）一个只使用CSS的解决方案，因为复选框和
.fake复选框是兄弟

CSS

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

(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));

(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));

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

HTML

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

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

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


伪造的
可能重复的我会敦促你看另一个答案：可能重复的我会敦促你看另一个答案：这可以简化为
$（This）。hasClass（'checked-state'）
是一个
布尔值，可以使用
toggleClass
，我是在建议
.toggleClass>（className，state）
方法…我将尝试此方法。很快就会回来：）谢谢：）@Satpal另外，
：复选框
的冲突已经选中了
属性。第一次单击时，该类被删除，但仍选中了
：checkbox
，然后在另一次单击时，该类变为相反（添加该类时，
：checkbox
未选中`反之亦然）。如何修复此问题？@Satpal它正在处理
：复选框
，该复选框不包含在
中。我已经用Bootstrap3框架做了一个测试。请看一下，告诉我有什么问题。谢谢。这可以简化为
$（This）。hasClass（'checked-state'）
是一个
Boolean
值，
toggleClass
可以使用…我建议使用
。toggleClass（className，state）
方法…我会试试这个。很快就会回来：）谢谢：）@Satpal还有，
：checkbox
与已选中的
属性有冲突。第一次单击时，该类被删除，但仍选中了
：checkbox
，然后在另一次单击时，该类变为相反（添加该类时，
：checkbox
未选中`反之亦然）。如何修复此问题？@Satpal它正在处理
：复选框
，该复选框不包含在
中。我已经用Bootstrap3框架做了一个测试。请看一下，告诉我有什么问题。谢谢。我猜在实践中，实际的复选框是隐藏的。@JamieBarker这没关系，因为它们包含在标签中。无论您在标签中单击什么位置，它都会切换复选框。谢谢，但在您的代码中，有时标签中不包含元素，因此我使用.click（）事件not.change（）+1@ChainTrap那很酷。我在你的问题中使用了原始的html。更好的方法：）我猜在实践中，实际的复选框是隐藏的。@JamieBarker这没关系，因为它们包含在标签中。无论您在标签中单击什么位置，它都会切换复选框。谢谢，但在您的代码中，有时标签中不包含元素，因此我使用.click（）事件not.change（）+1@ChainTrap那很酷。我在你的问题中使用了原始的html。只要效果更好：）