Reading checkboxes values with jQuery - php

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);
});
}

Answer 1

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

Answer 2

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/

Answer 3

Try below line of code:
var artistIds = Array();
$("input[name=artist[]]:checked").each(function(index){
artistIds[index] = $(this).val();
});
This may work for you..