Reading checkboxes values with jQuery

Question

I have a little bit problem with reading datas from checkboxes.

 {foreach value=artist2 from=$artist}
                <br />

                   <input type="checkbox" name="artist[]" value="{$artist2.MOVIE_ID}-{$artist2.PERSON_ID}" { in_array array=$item match=$artist2.NAME_SURNAME returnvalue="CHECKED" }>{$artist2.NAME_SURNAME}<br />

                <hr />
                {/foreach}
                   <p align="right">  <a style="float: right" href='javascript:void(null);' onclick="deleteData();" ><input type="submit" name="removeArtistFromMovie" onclick="showMessage('Seçilen oyuncu(lar) başarıyla silindi')" value="Seçilenleri Sil" id="value"</p></a>
                <br >
                  </form>

I produce checkboxes like that and in my js file:

I try this

function deleteData(){
    var artistIds = new Array();

    $("input[@type=artist[]][@checked]").each(function(){
        artistIds.push($(this).attr('id'));
    });

alert(artistIds);



$.post('/management/deleteDataAjax2', 
       { json: JSON.stringify({'artistIds': artistIds}) },
       function(response){
        alert("Başarıyla silindi");
        window.location.replace(window.location.pathname);
});



}

However, above code does not take the values of checkboxes which is checked. Why ?

Finally

I think problem is here because the page does not go to js.

<form name=form1 method=post action=# onsubmit='return validate(this)'>

                <br />

                   <input type="checkbox" name="artist[]" value="{$artist2.MOVIE_ID}-{$artist2.PERSON_ID}"  />{$artist2.NAME_SURNAME}<br />


                <hr />



                {/foreach}
                <p align="right">
                <a style="float: right" href='javascript:void(null);' onclick="deleteData();" ><br />
                    <input type="button" name="checkArtistButton" value="Seçilenleri Sil" id="ajaxCheckbox" /></a></p>
                <br >
                  </form>

and this is my js

function deleteData(){

    var artistIds = [];
$('#ajaxCheckbox').click(function() {
    $("input[name='artist[]']:checked").each(function() {
        artistIds.push($(this).attr('value'));
    });
    alert(artistIds);
});
    



$.post('/management/deleteDataAjax2', 
       { json: JSON.stringify({'artistIds': artistIds}) },
       function(response){
        alert("Başarıyla silindi");
        window.location.replace(window.location.pathname);
});



}

Manse · Accepted Answer · 2012-04-13 09:27:02Z

3

instead of

$("input[@type=artist[]][@checked]").each(function(){

try

$("input[name='artist[]']:checked").each(function(){

Working example here

note

I think you mean to get the value of the checkboxes - as looking at your markup they do not have id attributes - use .val() instead of attr('id') to get the value

Update

You are now setting up an event handler on the click of an anchor ... change this

function deleteData() {
    var artistIds = [];
    $('#ajaxCheckbox').click(function () {
        $("input[name='artist[]']:checked").each(function () {
            artistIds.push($(this).attr('value'));
        });
        alert(artistIds);
    });

to this

function deleteData() {
    var artistIds = [];
    $("input[name='artist[]']:checked").each(function () {
        artistIds.push($(this).val());
    });
    alert(artistIds);

the deleteData function is already called onclick

edited Apr 13, 2012 at 9:27

answered Apr 13, 2012 at 8:09

Manse

38.1k11 gold badges88 silver badges112 bronze badges

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

4 Comments

Mert METİN Over a year ago

this still is a empty message alert(artistIds); :S

JohnP Over a year ago

@Chandresh The example works. The problem is that your inputs don't have IDs. Change to code to take the .val()

Mert METİN Over a year ago

your code is work in jsfiddle but when i click button nothing happens :S

Manse Over a year ago

@MertMETİN updated answer - you really need to learn JavaScript and jQuery (if you continue to use it)

ThiefMaster · Accepted Answer · 2012-04-13 08:09:15Z

1

Use the :checked selector instead of [@checked] (btw, you do not use @ in CSS property selectors). You also used the wrong property selector for the name. I've also simplified your code a bit; your use-case is perfect to use .map(..).get()

var artistIDs = $("input[name='artist[]']:checked").map(function(){
    return this.id;
}).get();

Demo: http://jsfiddle.net/ThiefMaster/sBmdC/

answered Apr 13, 2012 at 8:09

ThiefMaster

320k85 gold badges607 silver badges648 bronze badges

2 Comments

Manse Over a year ago

+1 for working solution ... one question for me ... why map() instead of each() ? (works fine with each() also - see my answer and example code)

ThiefMaster Over a year ago

map() reduces the collection to an object containing the return values of the function passed to it, then .get() returns a plain array. As you can see, the .push() is not necessary anymore.

Manse · Accepted Answer · 2012-04-13 08:17:05Z

1

Try below line of code:

var artistIds = Array();
$("input[name=artist[]]:checked").each(function(index){
     artistIds[index] = $(this).val();
});

This may work for you..

edited Apr 13, 2012 at 8:17

Manse

38.1k11 gold badges88 silver badges112 bronze badges

answered Apr 13, 2012 at 8:09

Chandresh M

3,4932 gold badges26 silver badges48 bronze badges

1 Comment

Mert METİN Over a year ago

alert(artistIds); still is empty :S

Collectives™ on Stack Overflow

Reading checkboxes values with jQuery

3 Answers 3

note

Update

4 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

note

Update

4 Comments

2 Comments

1 Comment

Related