Home » Html » Get checkbox values using checkbox name

Get checkbox values using checkbox name

Posted by: admin November 30, 2017 Leave a comment

Questions:

I have several input checkboxes, (they name is same for send array on server).

So, I need get each value this checkboxes and I want use as selector checkbox names, this not works, help please.

<form>
  <input type="checkbox" name="bla[]" value="1" />
  <input type="checkbox" name="bla[]" value="2" />
</form>

js:

$(document).ready( function () {    

   $("input[name=bla]").each( function () {
       alert( $(this).val() );
   });

});

DEMO

Answers:

You are selecting inputs with name attribute of "bla", but your inputs have "bla[]" name attribute.

$("input[name='bla[]']").each( function () {

http://jsfiddle.net/26axX/

Questions:
Answers:

You should include the brackets as well . . .

<input type="checkbox" name="bla[]" value="1" />

therefore referencing it should be as be name='bla[]'

$(document).ready( function () { 

   $("input[name='bla[]']").each( function () {
       alert( $(this).val() );
   });

});

Questions:
Answers:

Like it has been said few times, you need to change your selector to

$("input[name='bla[]']")

But I want to add, you have to use single or double quotes when using [] in selector.

Questions:
Answers:

I would like to add that if you’re trying to get all of the check-boxes with that name that have been selected, you would want to use the following syntax:

$("[name='bla[]']:checked").each(function () {
    // do stuff
});

Make sure there is not a space between the closing ] and :checked

Questions:
Answers:
$("input[name='bla[]']").each( function () {
    alert($(this).val());
});

Questions:
Answers:

If you like to get a list of all values of checked checkboxes (e.g. to send them as a list in one AJAX call to the server), you could get that list with:

var list = $("input[name='bla[]']:checked").map(function () {
    return this.value;
}).get();

Questions:
Answers:

// get checkbox values using checkbox’s name

<head>
        <script>
        function getCheckBoxValues(){
            $('[name="checkname"]').each( function (){
                alert($(this).val());
            });
        }
        </script>
    </head>
    <body>
        <input type="checkbox" name="checkname" value='1'/>
        <input type="checkbox" name="checkname" value='2'/>
        <input type="checkbox" name="checkname" value='3'/>
        <input type="button" value="CheckBoxValues" onclick="getCheckBoxValues()"/>
    </body>

// get only the values witch are checked

function getCheckBoxValues(){
        $('[name="checkname"]').each( function (){
            if($(this).prop('checked') == true){
                alert($(this).val());
            }
        });
    }