Javascript 使自定义复选框与css一起工作-选择或选中“不工作”

我无法选中复选框并在其中看到一个复选框。不知何故，css没有连接到HTML。其中一个问题是HTML是由Django自定义呈现函数生成的，所以我尽量减少更改。以下是HTML：

<li class="option table"><div class="option-checkbox"><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div></li>

我根本看不出问题是什么。谢谢

---

没有js/jquery还有其他方法吗。我的HTML是从数据库中呈现的，因此我希望它尽可能干净，而使用js/jquery意味着它将变得凌乱。

假设您的完整代码如下所示：

<li class="option table">
    <div class="option-checkbox"><div class="check"></div><input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /></div>
</li>

致：

我也演示了这一点

---

请记住，此解决方案只是一个演示-仍有很大的改进空间。

我认为这一点已经简化了很多。设置“复选框”样式的诀窍是设置标签样式，并使用

+

选择器，这样我们就可以知道何时选中了复选框。这里有一个非常简单的方法

/* Let's make our checkbox a simple green box! */
label:before {
  content: '';
  background-color: green;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  vertical-align: middle;
}

/* When the input **before** the label is checked, let's adjust it's styling. */
input:checked + label:before {
  background-color: red;
}

这是我的演示HTML

<div class="field">
  <input type="checkbox" name="foo[]" id="foo-003" value="foo-003">
  <label for="foo-003">Foo 003</label>
</div>

富003

这里有一个演示：

---

这应该有助于让事情变得更清楚。

我认为您的CSS没有提供足够的HTML。我看不到有

选项的元素。@BillCriswell抱歉，现在应该在那里了。将
所选的
类添加到
的clickhandler在哪里？另外，
类应用的元素在哪里？@SquareCat我需要一个click handler吗？我认为HTML+css在chrome上还不够，我得到了彩色的复选框和标准的复选框。仍然无法摆脱标准的复选框，只显示一个复选框谢谢-我有一个游戏-问题是-继承了一个非常复杂的样式表。理想情况下，所有的输入都应该在标签的右边-我们怎么做？谢谢-我有一个游戏-问题是-继承了一个非常复杂的样式表。理想情况下，所有的输入都应该在标签的右边-我们怎么做？谢谢-应该切换到什么：对吗？我想把标签放在复选框的前面或左边。有没有办法不用js/jquery。我的HTML是从数据库中呈现出来的，所以我希望它尽可能干净，而使用js/jquery意味着它会很混乱，而不是我的解决方案。它需要javascript。比尔的解决方案似乎没有问题。
<li class="option table">

// In plain javascript
<li onclick="document.getElementById('id_MyJobChoices_0').click();this.className=(document.getElementById('id_MyJobChoices_0').checked==true?'option table selected':'option table')" class="option table">

// or using jQuery
<li onclick="$(this).toggleClass('selected')" class="option table">  

// In plain javascript
document.getElementById('id_MyJobChoices_0').checked

// or using jQuery
$('#id_MyJobChoices_0').is(':checked')

/* Let's make our checkbox a simple green box! */
label:before {
  content: '';
  background-color: green;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  vertical-align: middle;
}

/* When the input **before** the label is checked, let's adjust it's styling. */
input:checked + label:before {
  background-color: red;
}

<div class="field">
  <input type="checkbox" name="foo[]" id="foo-003" value="foo-003">
  <label for="foo-003">Foo 003</label>
</div>