检查选中了哪些复选框

Question

I have read this post and this post and others but i didnt get it to work in my code.

here is the Fiddle for better see my code on live.

this is my 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');
 });

this is my 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>

i dont know what im doing wrong here . i couldnt get the background Green Of the checked box in my code.

any help would much apreciated.

EDIT even the answers down works in fiddle But i guess i have more problem here.

if i write html code above Normal , the js code is fired and works But im using html code inside js function like that:

  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 ;
  }

so this function when i call it it works but when i want apply the above code on it its not working and not firing at all.

this function is Out of the Dom handler. Fiddle here

Answer 1

Bind the input with a on change event

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

DEMO

Update

You need to use event-delegation on dynamically added elements

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

Answer 2

You have to do like this :

1st Way:

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

2nd Way:

More better approach is to create a css class and add/remove it on 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

You need to use click/change event to detect the changes on checkboxes. Use:

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

Demo

Answer 4

You can use this:

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