Jquery if checkbox is checked Bootstrap switch

Question

I use Bootstrap switch plugin to make my checkboxes looks like switch buttons. I need to check if the checkbox is checked in jQuery. I Googled a lot and I tried some advice and code snippets but without success.

I think the cleanest code I found is

$('#checkbox').attr('checked');

but it still wont work on my website. I have declared jQuery in head. I try to use this snippets on non-bootstrap-switch-checkboxes but still no success.

JS:

 <script>
    $(function(){
      $(".odeslat").click(function(){
           $('#pozadavky').slideUp(100);
           $('#datumpick').slideDown(300);

       var typpaliva = 'nic';
       var malpg = 'nic';¨

       /***Important condition***/

       if ($('#uho').attr('checked')) {
            $.cookie("typpaliva", "Diesel");
       }
       else {
            $.cookie("typpaliva", "Benzin");
       }


 /**********************************************/


    $.ajax({
   url: 'http://podivej.se/script_cas.php',
   data: {druh: '30'},
   type: "POST",
   success: function(data){
            alert($.cookie('typpaliva')); 
            alert($.cookie('malpg'));   
   }
   });

  });
});
</script>

HTML

<input type="checkbox" name="testcheckbox" id="uho"/>

"it still wont work on my website" Please be more precise. What exactly does not work? What happens? What do you expect to happen? What have you done to debug the problem? — Felix Kling
– Felix Kling, Commented Jun 18, 2014 at 6:33

Bhushan Kawadkar · Accepted Answer · 2014-06-18 06:31:52Z

21

Use :

if ($('#uho').is(':checked')) {

instead of

if ($('#uho').attr('checked')) {

answered Jun 18, 2014 at 6:31

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pathros Over a year ago

@BhushanKawadkar How do you tell when the user checks or unchecks?

Bhushan Kawadkar Over a year ago

@pathros, you can register a .click(function().. or .change(function().. event handlers and then check $(this).is(':checked') which return true if checked and false if unchecked.

Shaunak D · Accepted Answer · 2014-06-18 06:38:28Z

13

Demo

Use .prop() instead of .attr().

.prop returns - 'true' or 'false'. Use this
.is(':checked') returns - 'true' or 'false' -:checked is a pseudo slector. Or this
.attr returns - 'checked' or 'attribute undefined'.

$('#uho').prop('checked')

if($('#uho').prop('checked')){
    $.cookie("typpaliva", "Diesel");
}
else {
    $.cookie("typpaliva", "Benzin");
}

edited Jun 18, 2014 at 6:38

answered Jun 18, 2014 at 6:33

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

Apps-n-Add-Ons · Accepted Answer · 2018-03-02 14:45:27Z

1

Based on a comment in the accepted answer, here's how I solved this for a Terms and Conditions checkbox in bootstrap:

HTML

<div class="checkbox">
   <label>
      <input id="agreeTAC" type="checkbox" value="">
      I have read and agree to the TERMS AND CONDITIONS listed on this page.
   </label>
</div>

Javascript (with jQuery)

$("#agreeTAC").change(function(){
    var agreed = $(this).is(':checked');
    console.log("agreeTAC value changed and is ", agreed);
    if(agreed === true) { 
       // do 'true' stuff, like enabling a 'Continue' button
    }
    else {
       // do 'false' stuff, like disabling a 'Continue' button
    }
})

answered Mar 2, 2018 at 14:45

Apps-n-Add-Ons

2,1651 gold badge19 silver badges31 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-06-18 06:32:18Z

0

$('#uho').attr('checked') will return undefined. you can use $('#uho:checkbox:checked').length property to check if checkbox is checked or not. Try this snippet:

 if ($('#uho:checkbox:checked').length > 0) {
        $.cookie("typpaliva", "Diesel");
   }
   else {
        $.cookie("typpaliva", "Benzin");
   }

answered Jun 18, 2014 at 6:32

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Sajid Ali Khan · Accepted Answer · 2014-06-18 06:36:18Z

0

use this code on page load

document.getElementById("#uho").checked = true;

answered Jun 18, 2014 at 6:36

Sajid Ali Khan

112 bronze badges

2 Comments

The Alpha Over a year ago

Please tell Why is that necessary while OP has jQuery ?

Sajid Ali Khan Over a year ago

This is direct method. you can use java script for this purpose.

Pawan · Accepted Answer · 2014-06-18 06:38:01Z

0

Use

  if($('#chkBoxID').is(":checked")){ // do stuff }

answered Jun 18, 2014 at 6:38

Pawan

1,7421 gold badge16 silver badges37 bronze badges

Collectives™ on Stack Overflow

Jquery if checkbox is checked Bootstrap switch

6 Answers 6

2 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related