Question

我无法选中复选框并查看其中的复选框。不知何故，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>

这是呈现复选框的CSS：

.option .option-checkbox input[type="checkbox"]{display:none}
.option.selected{color:#10a6b8}
.option.selected .check{margin:3px 1px;background:url(check.png) no-repeat;width:16px;height:13px;overflow:hidden}

.option:hover{border:1px solid #0e91a1}
.option:active,.option.selected:active, .option.active{background-color:#0e91a1;color:#fff}

 .option-checkbox {
    background-color: #FFFFFF;
    border: 2px solid #E2E2E2;
    height: 20px;
    margin: 20px;
    width: 20px;
}

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

有没有js / jquery的方法。我的HTML是从数据库呈现的，所以我希望它尽可能干净，并且让js / jquery意味着它会变得混乱。

Answer 1

我认为这简化了一下。样式化“复选框”的技巧是设置标签的样式并使用+选择器，以便我们可以判断复选框何时被选中。这是一个非常简单的方法。

/* 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>

以下是您的演示：http://jsbin.com/UvuNaWo/3/edit?html,css,output

它应该有助于让事情更清楚。

Answer 2

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

<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>

我通常可以通过添加以下内容来展示您期望的结果：

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

// or using jQuery
onclick="$('#id_MyJobChoices_0').click();$(this).toggleClass('selected')"

为：

<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">

See this fiddle for a demonstration

请注意

我使用的是占位符图片，而不是check.png文件。

<强>提示

为了检查当前是否标记了复选框，您可以使用：

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

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

我也证明了这一点in the fiddle。

请记住，这个解决方案只是一个示范 - 还有很大的改进空间。

使自定义复选框与css一起使用 - 选择或检查不工作

2 个答案: