Check which checkboxes is checked

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

Did you read these posts attentively? I don't see any `click` or `change` event handlers in your code. Just the code, that is executed on window loaded. — Regent, Sep 08 '14 at 12:44
Just for downvoters, i dont know if my post is not clear or what , i have provided everything, i can improve my question instead of downvoting. — Karim Daraf, Sep 08 '14 at 12:48

Anton · Accepted Answer · 2014-09-08T13:23:33.160

0

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

edited Sep 08 '14 at 13:23

answered Sep 08 '14 at 12:44

Anton

32,245
5
44
54

your demo works but not with me i dont know whats wrong! – Karim Daraf Sep 08 '14 at 13:01
Are you using a DOM-ready-handler? `$(function(){/*the code*/});` @KarimDaraf – Anton Sep 08 '14 at 13:05
@KarimDaraf Also are you getting any errors in your console? – Anton Sep 08 '14 at 13:06
yes im using this `$(document).ready(function(){` and your code is inside it, and i have no error in the console. i have tried alert(1) inside your code but is not fired even. – Karim Daraf Sep 08 '14 at 13:10
Is the elements class `.chek` in your code? or is it `.check`? – Anton Sep 08 '14 at 13:11
its chek , i have double checked everything. – Karim Daraf Sep 08 '14 at 13:14
@KarimDaraf Can you post all your code in jsfiddle. Is jQuery included correctly? Post everything from `....` – Anton Sep 08 '14 at 13:15
Ah i have one thing i guess the problem is comming from it , i will edit and show the trouble code. – Karim Daraf Sep 08 '14 at 13:15
@KarimDaraf You need to use event-delegation for dynamically added elements, check my update. – Anton Sep 08 '14 at 13:23
Well i didnt know about delegation Now it works when checked But when unchecked it stays Green , its not none as you done. – Karim Daraf Sep 08 '14 at 13:31
1

hahaha silly ask, i have putted color and works , there is no none color as you done :). Thanks so much it works now :) – Karim Daraf Sep 08 '14 at 13:33

Ehsan Sajjad · Answer 2 · 2014-09-08T12:50:13.420

0

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/

edited Sep 08 '14 at 12:50

answered Sep 08 '14 at 12:45

Ehsan Sajjad

61,834
16
105
160

have done alert(1); inside but this alert is not fired even. i have checked the right everything . – Karim Daraf Sep 08 '14 at 13:07
put the code in _document.ready_ and make sure jquery library is included – Ehsan Sajjad Sep 09 '14 at 04:08

score 0 · Answer 3 · answered Sep 08 '14 at 12:45

0

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

answered Sep 08 '14 at 12:45

Milind Anantwar

81,290
25
94
125

score 0 · Answer 4 · answered Sep 08 '14 at 12:47

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

Check which checkboxes is checked

4 Answers4

1st Way:

FIDDLE:

2nd Way:

CSS:

JQUERY:

FIDDLE: