How to use JQuery to get the value property of a checkbox in a form?

Question

I want to use either Javascript or JQuery to get the value of a checkbox when it is checked.

How can I do that? Please see question marks in the JQuery code below.

<html>
<body>

<form id="toggleForm" action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<script>
$('**???**').on('**checked???**', function(){
   var checkedValue = $(this).attr('**value???**');
   console.log("The checkbox value property is "+checkedValue);
});
</script>

</body>
</html>

(Please note that my question is not a duplicate of other questions, because in the other questions, the checkboxes have a class and the code is grabbing them using their class. In my question, my checkboxes don't have a class. How can I grab them without them having a class or ID?? How can I check their value? What is the event called for when they are checked? Please see the question marks in my attempt above.)

Possible duplicate of https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery. — Striped, Feb 11 '18 at 09:17
[jQuery Learning Center](https://learn.jquery.com/using-jquery-core/manipulating-elements/) — Andreas, Feb 11 '18 at 09:18
Possible duplicate of [Setting "checked" for a checkbox with jQuery?](https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Striped, Feb 11 '18 at 09:18

score 1 · Answer 1 · answered Feb 11 '18 at 09:18

Use .val()

$(':checkbox').on('change', function() {

  var checkedValue = $(this).val();
  console.log("The checkbox value property is " + checkedValue);


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggleForm" action="">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

score 1 · Accepted Answer · answered Feb 11 '18 at 09:19

$(document).on('change','input:checkbox',function(){
var value=$(this).val();
if($(this).is(':checked')){
alert(value+" selected");
}
else{
alert(value+" unselected");}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>

<form id="toggleForm" action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

score 0 · Answer 3 · answered Feb 11 '18 at 10:35

$(document).ready(function(){
$('input:checkbox').change(function(){
($(this).prop("checked") == true) ? 
console.log($(this).val()+ " " +"checked"):console.log($(this).val()+ " " +"unchecked")
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggleForm" action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

How to use JQuery to get the value property of a checkbox in a form?

3 Answers3