当我选中或取消选中时，我试图更改复选框标签的字体颜色和背景颜色。我在这个网站上找到了一个 javascript 解决方案，但无法使代码正常工作。这是我到目前为止所尝试过的。现在它正在将“突出显示”类附加到父 div，我只想更改标签。谢谢你的时间。
HTML:
<div class="checkboxes">
<input type="checkbox" name="1" id="option one" value="orange"><label for="1" class="highlight">Orange</label>
<input type="checkbox" name="2" id="option two" value="apple"><label for="1" class="highlight">Apple</label>
</div>
JavaScript:
$( '.checkboxes' ).on( 'click', 'input:checkbox', function () {
$( this ).parent().toggleClass( 'highlight', this.checked );
}); // end checkbox style
CSS:
.checkboxes label {
font-family:Open Sans Italic;
font-size: 12px;
color: #666;
border-radius: 20px 20px 20px 20px;
background: #f0f0f0;
padding: 3px 10px;
text-align: left;
}
.highlight {
font-family:Open Sans Italic;
font-size: 12px;
color: white;
border-radius: 20px 20px 20px 20px;
background: #86b3c1;
padding: 3px 10px;
text-align: left;
}
你可以只使用 CSS 来做到这一点：
input[type=checkbox]:checked + label { /* styles that get changed */ }
demo http://dabblet.com/gist/3157721 http://dabblet.com/gist/3157721
另外，在制作演示时我注意到几个问题：
-
id="option one"- id必须只有1且不能有空格
- 的价值
for的属性label应该是id (not name）对应的input;这还允许您通过单击标签而不是复选框本身来选中/取消选中复选框
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
