javascript get the value of checkbox if checked without button clicked

Question

javascript get the value of checkbox if checked without button clicked

I am struck in the middle of project, please help..

how to get the check box value from the class name or from by name or by id through alert so that the particular value I can pass...

I am sorry to ask..I am new the jquery and javascript..

This is my HTML ...

<input type="checkbox" name='cbox' value="red" class="theClass"/>red
<input type="checkbox" name='cbox' value="green" class="theClass"/>green
<input type="checkbox" name='cbox' value="yer" class="theClass"/>yer
<input type="checkbox" name='cbox' value="asdasd" class="theClass"/>asdasd
<input type="checkbox" name='cbox' value="radgdfged" class="theClass"/>radgdfged
$(function(){

$('input[type=checkbox]').on('change', function() {
   alert($(this).val());
    console.log($(this).val());
});

});

I googled much ...but every where onclick the button than only will get all checkbox values.. I am getting the values using the onclick button ....but the thing is getting the value without using the button... My concern is getting the value if checkbox is checked..

eg: if i checked red , i should get alert 'red'.....

you need to wrap the javascript code in <script type="text/javascript"> [CODE] </script> nodes — Florian Moser
– Florian Moser, Commented May 12, 2015 at 7:48

Samurai · Accepted Answer · 2015-05-12 08:13:39Z

13

jQuery:

$('input[type=checkbox]').on('change', function() {
    console.log($(this).val());
});

Javascript:

var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
    cbs[i].addEventListener('change', function() {
        console.log(this.value);
    });
}

EDIT:

If you want the value only if the checkbox is checked.

jQuery:

$('input[type=checkbox]').on('change', function() {
    if($(this).is(':checked'))
        console.log($(this).val());
});

Javascript:

var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
    cbs[i].addEventListener('change', function() {
        if(this.checked)
            console.log(this.value);
    });
}

jsfiddle DEMO

P.s. for jQyery put your code inside:

$(function() {
    //code here
});

edited May 12, 2015 at 8:13

answered May 12, 2015 at 7:45

Samurai

3,7295 gold badges29 silver badges41 bronze badges

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

8 Comments

mahesh Cholleti Over a year ago

thanks dude...but this condition is not working in the tree menu..I am getting the error in console ...please check ..Uncaught TypeError: $(...).on is not a function

Samurai Over a year ago

That assumes you're using jQuery and put it inside $(document).ready, edited the answer.

Samurai Over a year ago

If you're getting error you either not adding it in ready (see the last part in edit) or you're not loading jQuery. added a demo so you can check.

mahesh Cholleti Over a year ago

I have added like this :

mahesh Cholleti Over a year ago

$(function() { $(":checkbox").each(function() { alert($(this).val()) }); });

|

Milind Anantwar · Accepted Answer · 2015-05-12 07:46:00Z

3

If you need to get all the checked checkboxes on change of checkboes, you can use:

$('.theClass').change(function(){
  alert($('.theClass:checked').map(function(){return this.value}).get())
});

Working Demo

answered May 12, 2015 at 7:46

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

mahesh Cholleti Over a year ago

Dude...please check..when I am unchecked also getting the alert box...please check

mahesh Cholleti Over a year ago

yes...thanks dude..please help me ..in this page also.....stackoverflow.com/questions/30099234/…

Yangguang · Accepted Answer · 2015-05-12 09:50:45Z

3

try:

<input type="checkbox" name='cbox' value="red" class="theClass" onchange="alert(this.value)"/>red

demo

EDIT:

<input type="checkbox" name='cbox' value="red" class="theClass" onchange="this.checked?alert(this.value):null"/>red

demo

EDIT

alert all checked input values:

$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked')){
    var values = [];
    $.each($('input:checked'),function(index,input){
        values.push(input.value);
    });
    alert(values.join(','));
}    
});

demo

edited May 12, 2015 at 9:50

answered May 12, 2015 at 7:44

Yangguang

1,7859 silver badges10 bronze badges

3 Comments

mahesh Cholleti Over a year ago

But only one error...please check ...when i unchecked also getting the value in alert box..please check

mahesh Cholleti Over a year ago

And one more ...query..if i checked ..multiple check values...all values are not coming in alert box...please check

mahesh Cholleti Over a year ago

@yangguange ...thanks dude...please help me in this page also : stackoverflow.com/questions/30099234/…

Radonirina Maminiaina · Accepted Answer · 2015-05-12 07:46:13Z

2

HTML

<input type="checkbox" name='cbox' value="red" class="theClass" checked/>

jQuery

$(function() {
    $(":checkbox").each(function() {
        alert($(this).val())
    });
});

answered May 12, 2015 at 7:46

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

1 Comment

mahesh Cholleti Over a year ago

Hi,, you code is when page is loaded...all check boxes values are getting alert without checking..

Preeti Dua · Accepted Answer · 2015-07-03 08:10:26Z

Javascript get the value of checkbox if checked without button clicked This code is working fine.Try this

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Get Values of Selected Checboxes</title>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

         $("input[type=checkbox]").change( function() {
                  var values = [];
                $.each($('input:checked'),function(index,input){
                    values.push(input.value);
                 });
             alert(values.join(','));

            var n = $( "input:checked" ).length;
            alert(n);
          });
    });

</script>

</head>

<body>

   <form id="booking_form">
        <input type="checkbox" name="bType" id="bType" value="A,200">&nbsp;Type A - USD200<br>
        <input type="checkbox" name="bType" id="bType" value="B,150">&nbsp;Type B - USD150<br>
        <input type="checkbox" name="bType" id="bType" value="C,100">&nbsp;Type C - USD100<br>
        <input type="checkbox" name="bType" id="bType" value="D,50">&nbsp;Type D - USD50<br>

    </form>

</body>

</html>

Preeti Dua

Collectives™ on Stack Overflow

javascript get the value of checkbox if checked without button clicked

5 Answers 5

8 Comments

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related