CODEWITHSUNDEEP
jquery
woj_jas
woj_jas

Reputation: 1088

How to get value of checked checkbox via jquery

I'm trying to get value of selected checkbox in my ajax form on onclick event. The problem is that nothing is working and I cant get that value

<td>
<input type="checkbox" value="30" name="checkbox15" id="checkbox2" class="css-checkbox"><label for="checkbox2" class="css-label radGroup label_border css-checkbox_cl clr"> test</label>
<input type="checkbox" value="23" name="checkbox15" id="checkbox3" class="css-checkbox"><label for="checkbox3" class="css-label radGroup label_border css-checkbox_cl clr"> test2</label>
<input type="checkbox" value="15" name="checkbox15" id="checkbox4" class="css-checkbox"><label for="checkbox4" class="css-label radGroup label_border css-checkbox_cl clr"> test3</label>
</td>

I tried to get values by this code

  $(".css-checkbox").click(function(event){
            event.preventDefault();
            var searchIDs = $("input:checkbox").map(function(){
              //  return $(this).val();
            }).get(); // <----
            console.log(searchIDs);
        });

And it returns empty array . Can somebody please help me ?

Link to JSFIDDLE

Upvotes: 0

Views: 1541

Answers (4)

Apul Gupta
Apul Gupta

Reputation: 3034

Try this:

  $(".css-checkbox").change(function(event){
      var searchIDs = $("input:checkbox:checked").map(function(){
                    return $(this).val();
                }).get(); 
                console.log(searchIDs);
            });

Upvotes: 0

Genjuro
Genjuro

Reputation: 7735

$(".css-checkbox").click(function(event){
    alert($(this).val());
});

Here is a fiddle

Upvotes: 0

Ruby Blood
Ruby Blood

Reputation: 11

Try: 

 $('.css-checkbox').click(function(){
      var value = $(this).val();
      console.log(value);
    });

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

  $(".css-checkbox").click(function (event) {
      var searchIDs = $("input:checkbox:checked").map(function () {
          return $(this).val();
      }).get(); 
      alert(searchIDs);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="checkbox" value="30" name="checkbox15" id="checkbox2" class="css-checkbox">
    <label for="checkbox2" class="css-label radGroup label_border css-checkbox_cl clr">test</label>
    <input type="checkbox" value="23" name="checkbox15" id="checkbox3" class="css-checkbox">
    <label for="checkbox3" class="css-label radGroup label_border css-checkbox_cl clr">test2</label>
    <input type="checkbox" value="15" name="checkbox15" id="checkbox4" class="css-checkbox">
    <label for="checkbox4" class="css-label radGroup label_border css-checkbox_cl clr">test3</label>

Try to use :checked selector,

  $(".css-checkbox").click(function (event) {
      event.preventDefault();
      var searchIDs = $("input:checkbox:checked").map(function () {
          return $(this).val();
      }).get(); // <----
      console.log(searchIDs);
  });

DEMO

Upvotes: 3

Related Questions