custom check box: how to check whether check box is checked or not

Question

I have made custom check box by using this :

also available on stackoverflow: enter link description here

but i am trying to check whether box is crossed check or not but i am failed bcz jquery is nt showing anything.

$(document).ready(function () {
    var ckbox = $('#demo_box_2');

    $('#demo_box_2').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

input[type=checkbox].css-checkbox { position: absolute;  overflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0; border:0; } 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; }  .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="demo_box_2" class="css-checkbox" type="checkbox" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
</form>

i dont know where i am wrong whether i am passing id to jquery correctly but still fail to understand.

Hi, your code seems to work perfectly – Subhrajyoti Das Mar 13 '17 at 07:22 — Subhrajyoti Das, Mar 13 '17 at 07:22

score 5 · Accepted Answer · answered Mar 13 '17 at 06:52

5

You can use JQuery .is(":checked") to do so, like so:

$("input[type=checkbox]").click(function() {
  var msg = "";
  $("input[type=checkbox]").each(function() {
    if ($(this).is(":checked")) {
      msg += "#" + $(this).attr("id") + " is checked!\n";
    } else {
      msg += "#" + $(this).attr("id") + " is NOT checked!\n";
    }
  });
  alert(msg);
});

Here is the JSFiddle demo

answered Mar 13 '17 at 06:52

Ahs N

8,233
1
28
33

thnx and sorry for late reply. was in class room – user3162878 Mar 13 '17 at 12:12

score 3 · Answer 2 · answered Mar 13 '17 at 06:47

your code is working, although I made some changes, used $(this) instead of id selector.

$(document).ready(function () {
    

    $('#demo_box_2').on('click',function () {
        if ($(this).is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

input[type=checkbox].css-checkbox { position: absolute;  overflow: hidden;  clip: rect(0 0 0 0);  height:1px;  width:1px;  margin:-1px;  padding:0; border:0; } 
input[type=checkbox].css-checkbox + label.css-label { padding-left:20px; height:15px;  display:inline-block; line-height:15px; background-repeat:no-repeat; background-position: 0 0; font-size:15px; vertical-align:middle; cursor:pointer; } 
input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 -15px; }  .css-label{ background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="demo_box_2" class="css-checkbox" type="checkbox" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
</form>

custom check box: how to check whether check box is checked or not

2 Answers2