Jquery将类添加到输入复选框字段

时间:2014-12-31 05:43:48

标签: jquery

我想在包含复选框的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>

5 个答案:

答案 0 :(得分:5)

如果我理解你的问题,可以使用toggleClass()

$(document).ready(function () {
    $("#thechecks input[type='checkbox']").click(function () {
        var req = $(this).val();
        $("#item-" + req).toggleClass("item-select");
    });
});

FIDDLE

答案 1 :(得分:0)

Fiddle

试试这个

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

Demo here

试试这个

使用toggleClass代替addClass

//  $("#item-" + req).addClass("item-select");
 $("#item-" + req).toggleClass("item-select");

答案 3 :(得分:0)

尝试jquery closesttoggleClass

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