How to assign values to checkbox in html when check and uncheck?

Question

I have a html checkbox in my html form. Now, i want to assign 1 when it is checked and assign 0 when it is unchecked. So, how can i do that with jquery or java Script?

<!DOCTYPE html>
<html>

  <script language="javascript" type="text/javascript">
  <!--
  function greeter() {
      alert(document.getElementById(vehicleChkBox).value);
  }
  $('#vehicleChkBox').change(function(){
       if($(this).attr('checked')){
            $(this).val(1);
       }else{
            $(this).val(0);
       }
  });
  </script>
  <body>
    <form>
      <input type="checkbox" name="vehicle" id="vehicleChkBox" value="FALSE" />
      <input type="submit" onsubmit="greeter()">
    </form>
  </body>

I tried with this. but, does not work.

Please post ur code and what you have tried so far!

Nitin Varpe
– Nitin Varpe

2014-09-29 11:27:59 +00:00
Commented Sep 29, 2014 at 11:27 — Nitin Varpe
– Nitin Varpe, Commented Sep 29, 2014 at 11:27
Assign to value of checkbox.

Sameera Liaynage
– Sameera Liaynage

2014-09-29 11:31:04 +00:00
Commented Sep 29, 2014 at 11:31 — Sameera Liaynage
– Sameera Liaynage, Commented Sep 29, 2014 at 11:31

T J · Accepted Answer · 2014-09-29 11:59:05Z

4

JS:

var checkbox = document.querySelector("input[type='checkbox']");
  checkbox.addEventListener("change",function(){
     this.value = this.checked ? 1 : 0;
  });

jQuery:

$(":checkbox").change(function(){
     $(this).val($(this).is(":checked") ? 1 : 0);
});

edited Sep 29, 2014 at 11:59

answered Sep 29, 2014 at 11:35

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

user2575725 · Accepted Answer · 2014-09-29 11:37:19Z

1

You may use JQuery for this with change event:

$(function() {
  $('#vehicleChkBox').on('change', function(e) {
    e.stopPropagation();
    this.value = this.checked ? 1 : 0;
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicleChkBox" value="0" />

answered Sep 29, 2014 at 11:37

user2575725

Comments

David Jones · Accepted Answer · 2014-09-29 11:31:29Z

0

You simply need to put its value as 1. This way when it is checked it will return 1 and when it is not checked it will return nothing so that way you can do a check and assign zero.

<input type="checkbox" name="my_checkbox" value="1" />

answered Sep 29, 2014 at 11:31

David Jones

4,3157 gold badges31 silver badges51 bronze badges

4 Comments

David Jones Over a year ago

Where does the dynamic value come from??

Sameera Liaynage Over a year ago

when we check assign 1 and uncheck assign 0.

David Jones Over a year ago

That is what this does. I think you need to get more familiar with how forms work.

Sameera Liaynage Over a year ago

is it changing when we check and uncheck?

Amol · Accepted Answer · 2014-09-29 11:37:22Z

0

I am using this and this is working absolutely fine:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Note: If the checkbox is checked it will return true otherwise undefined, so better check for the "TRUE" value.

OR

if(!$("#checkkBoxId").is(':checked') ){
 $(this).val('1');
}
else
$(this).val('0');

edited Sep 29, 2014 at 11:37

answered Sep 29, 2014 at 11:32

Amol

1,4612 gold badges18 silver badges32 bronze badges

Comments

herr · Accepted Answer · 2014-09-29 11:51:09Z

0

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script> 
   $(document).ready(function() {
         $('#vehicleChkBox').click(function(){
             if($(this).is(':checked'))
             {              
                  $(this).val('1');
             }
             else
             {
                 $(this).val('0');
             }
         });
    });
</script>

answered Sep 29, 2014 at 11:51

herr

8471 gold badge8 silver badges21 bronze badges

Comments

lennon310 · Accepted Answer · 2014-09-29 11:56:17Z

0

This will work fine for setting value

   $("#checkkBoxId").prop("checked") ? ($("#checkkBoxId").val(1)) :    ($("#checkkBoxId").val(0));

edited Sep 29, 2014 at 11:56

lennon310

12.7k11 gold badges46 silver badges63 bronze badges

answered Sep 29, 2014 at 11:34

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Collectives™ on Stack Overflow

How to assign values to checkbox in html when check and uncheck?

6 Answers 6

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related