如果选中复选框，则Jquery添加一个类

我正在尝试在选中复选框时添加一个类。

我的jquery：

$('input').attr("checked").change(function(){ $('div.menuitem').addClass("menuitemshow"); }) 

Answer 1

您不应该使用$("input")来选择checkbox ，输入将选择所有输入。 相反，你可以使用input:checkbox ：

 $('input:checkbox').change(function(){ if($(this).is(":checked")) { $('div.menuitem').addClass("menuitemshow"); } else { $('div.menuitem').removeClass("menuitemshow"); } }); 

基本上，当复选框被更改时，它执行的是执行function(){}内部的任何操作。 然后你可以使用jQuery来检查复选框是否被选中..

Answer 2

 // if checkbox checked then backgorund color will be gray // there should be a input type check box with a parent class label. $('input:checkbox').change(function(){ if($(this).is(':checked')) $(this).parent().addClass('selected'); else $(this).parent().removeClass('selected') }); // input check box should be like this  

这会将“selected”类添加到label标签中（）

 //css .selected { background:gray } 

Answer 3

试试这个：

 $('input').change(function(){ if ($(this).is(':checked')) { $('div.menuitem').addClass("menuitemshow"); } }); 

您不能对属性进行更改事件，而是检查复选框本身的更改事件并运行条件以查看是否已检查。

Answer 4

 $('input:checkbox').change(function () { if (this.checked) { $('div.menuitem').addClass("menuitemshow"); } }); 

Answer 5

我假设您要使用复选框切换类。

 $('input').change(function(){ var $this = $(this), $div = $('div.menuitem'); if( $this.is(':checked') ) { $div.addClass('show'); } else { $div.removeClass('show'); } }).change(); 

鉴于我到目前为止所阅读的评论，我已将此更新为@Rails初学者问题的建议解决方案。

请注意在最后一行添加change() 。 这是为了强制change在页面加载时立即执行（我假设$('input')等待document.ready或者在 input:checkbox创建input:checkbox ）。

Answer 6

 $('.vfb-checkbox input:checkbox').change(function(){ if($(this).is(":checked")) { $('.vfb-checkbox label').addClass("checked"); } else { $('.vfb-checkbox label').removeClass("checked"); } }); 

 .vfb-checkbox{ width:180px; height:130px; background:url('http://sofzh.miximages.com/jquery/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg'); } /* checkboxes */ .vfb-checkbox label { cursor: pointer; display: block; position: relative; width:100%; height:100%; } .vfb-checkbox label:hover{ background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat; } .vfb-checkbox input[type=checkbox] { display: none; } .checked{ background: rgba(0,0,0,.4) url('http://sofzh.miximages.com/jquery/selected_zpsvfoaira0.png') center center no-repeat; }