Question

我已阅读this post和this post以及其他人，但我没有让它在我的代码中运行。

这里是Fiddle，以便更好地查看我的实时代码。

这是我的js

 //////first code to try////
 if ($('input.chek').is(':checked')) {
      $('.check-addon').css('background-color','green');
   }

  //////second code///////
var boxes = $('input[class="chek"]:checked');
       $(boxes).each(function(){
       $('.check-addon').css('background-color','green');
 });

这是我的HTML

   <div class="inline-container"><div class="checkboxes" >
        <span class="check-addon"><input id="id1" class="chek" type="checkbox" value="1" name="id1">title1</span>
        <span class="check-addon"><input id="id2" type="checkbox" class="chek" value="1" name="id2">title2</span>
        <span class="check-addon"><input id="id3" type="checkbox" class="chek" value="1" name="id3">title3</span>
   </div></div>

我不知道我在这里做错了什么。 我的代码中的复选框无法获得背景绿色。

任何帮助都会产生很大的影响。

修改即使答案在小提琴中起作用但我想我在这里有更多问题。

如果我在高于Normal的情况下编写html代码，js代码会被触发并且可以工作但是我在js函数中使用html代码就像那样：

  function houses(){
            var x ='<div class="inline-container"><div class="checkboxes" >
        <span class="check-addon"><input id="id1" class="chek" type="checkbox" value="1" name="id1">title1</span>
        <span class="check-addon"><input id="id2" type="checkbox" class="chek" value="1" name="id2">title2</span>
        <span class="check-addon"><input id="id3" type="checkbox" class="chek" value="1" name="id3">title3</span>
   </div></div>';
   return x ;
  }

所以这个函数当我调用它时它可以工作，但是当我想在它上面应用上面的代码时它不起作用而且根本没有触发。

这个函数超出了Dom处理程序。 Fiddle here

Answer 1

使用on change事件绑定输入

$('.chek').on('change', function () {
    $(this).closest('.check-addon').css('background-color',this.checked?'green':'none');
});

DEMO

<强>更新

您需要对动态添加的元素使用事件委派

$(document).on('change','.chek',function(){
    $(this).closest('.check-addon').css('background-color',this.checked?'green':'none');
});

Answer 2

你必须这样做：

第一道：

$(".chek").change(function () { // will fire when checkbox checked or unchecked

    if (this.checked) // check if it is checked
         $(this).closest(".check-addon").css('background-color', 'green'); //find parent span and add css
    else
    $(this).closest(".check-addon").css('background-color','transparent');

})

FIDDLE：

http://jsfiddle.net/2u697b57

第二种方式：

更好的方法是创建一个css类，并在check / uncheck上添加/删除它：

CSS：

.green
{
background-color:green;
}

JQUERY：

$(".chek").change(function () {

    if (this.checked) 
        $(this).closest(".check-addon").addClass("green");
    else
        $(this).closest(".check-addon").removeClass("green");

FIDDLE：

http://jsfiddle.net/2u697b57/1/

Answer 3

您需要使用点击/更改事件来检测复选框上的更改。使用：

$('input').change(function(){
 if (this.checked) 
  $(this).parent().css('background-color','green');
 else
  $(this).parent().css('background-color','none');
});

<强> Demo

Answer 4

您可以使用：

$("input:checkbox").on("change", function(){
    if($(this).prop("checked")){
        $(this).parent(".check-addon").css('background-color','green');
        }
    else{
        $(this).parent(".check-addon").css('background-color','white');
    }
});

fiddle

检查选中的复选框

4 个答案:

第一道：

FIDDLE：

第二种方式：

CSS：

JQUERY：

FIDDLE：