我想在包含复选框的div中添加/删除一个类。
我80%在那里,但我不确定正确的语法来查看输入项是选中还是未选中。所以我可以添加或删除适当的类。
基本上我知道它需要看起来像:
if("$thechecks #item-" + req).attr('checked') {
$("#item-" + req).addClass("item-select");
} else {
$("#item-" + req).removeClass("item-select");
}
任何帮助/想法都会非常感激。
到目前为止,我做了一个小代码。
http://jsfiddle.net/brandrally/vc5wgpk2/
// Javascript //
$(document).ready(function () {
$("#thechecks input[type='checkbox']").click(function () {
var req = $(this).val();
$("#item-" + req).addClass("item-select");
});
});
// HTML //
<div id="thechecks">
<div id="item-1">
<label><input name="element[]" type="checkbox" value="1" > One</label>
</div>
<div id="item-2">
<label><input name="element[]" type="checkbox" value="2" > Two </label>
</div>
</div>
答案 0 :(得分:5)
如果我理解你的问题,可以使用toggleClass()
$(document).ready(function () {
$("#thechecks input[type='checkbox']").click(function () {
var req = $(this).val();
$("#item-" + req).toggleClass("item-select");
});
});
答案 1 :(得分:0)
试试这个
$(document).ready(function () {
$("#thechecks input[type='checkbox']").click(function () {
var req = $(this).val();
if($("#item-"+req).hasClass("item-select"))
{
$("#item-" + req).removeClass("item-select");
} else {
$("#item-" + req).addClass("item-select");
}
});
});
答案 2 :(得分:0)
试试这个
使用toggleClass
代替addClass
// $("#item-" + req).addClass("item-select");
$("#item-" + req).toggleClass("item-select");
答案 3 :(得分:0)
尝试jquery closest
和toggleClass
:
$(function() {
$('input[name^=element]').on('change', function(e) {//input name starting with `element`
e.stopPropagation();
$(this).closest('div[id^=item]').toggleClass('check', this.checked);
}).trigger('change');//fire on page load
});
.check {
background: skyblue;
}
div[id^=item] {
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thechecks">
<div id="item-1">
<label>
<input name="element[]" type="checkbox" value="1">One</label>
</div>
<div id="item-2">
<label>
<input name="element[]" type="checkbox" value="2" checked='checked'>Two</label>
</div>
</div>
答案 4 :(得分:0)
<ui>
<li><label><input id="checkbox2" type="checkbox" />Apple</label></li>
</ui>
//code before
<div id="wr" class="wrapper">
//code after
在
<div id="wr" class="wrapper"> by checkbox
添加/删除课程 点击:
<script>
$(document).ready(function(){
$('#checkbox2').click(function () {
$('#wr').toggleClass('on');
});
});
</script>