單擊按鈕時獲取相同類別但不同複選框的值的值

Question

單擊#catDelete時，我想獲取複選框的值。

下面是HTML代碼

<?php $i=1; do { ?> 
<input type="checkbox" value="<?php echo $row_cat['cat']; ?>" class="checkboxcat" id="<?php echo $i; ?>" name="catcheckbox" style="border:#cccccc 1px solid; background-color:#fff;"><?php echo $row_cat['cat']; ?> 
<span id="CatDelete" style="position:relative; left:10px; color:#ff0000; font-size:10px;">Delete</span> 
<?php $i++; } while ($row_cat = mysql_fetch_assoc($cat)); ?> 

jQuery代碼 - 它給我的第一個複選框

$('#CatDelete').click(function(){ 
alert($('.checkboxcat').attr('id')); 
}); 

讚賞任何幫助的價值。搜索了是否有重複的問題，但沒有找到。

Answer 1

您沒有顯示出太多的結構，但它看起來像複選框是跨度之前的同級元素。如果是這樣的：

$("#CatDelete").click(function() { 
    var val = $(this).prevAll('input').first().val(); 
    console.log(val); 
}); 

從點擊的元素開始，通過兄弟姐妹的作品向後尋找input要素，抓住了第一個，並得到其價值。

但是你現在編輯了這個問題來說它是在一個循環中。您不能有有多個元素具有相同的id（「CatDelete」）。您需要改變跨度來代替使用類，然後更改上述以使用該類。因此，舉例來說，如果你改變它使用類 「CatDelete」，則：

// v--- Note the change 
$(".CatDelete").click(function() { 
    var val = $(this).prevAll('input').first().val(); 
    console.log(val); 
}); 

Live Working Copy | Source

但我想我可能會稍微調整一下結構，以免你通過像這樣的兄弟元素狩獵。如果你把每對（複選框和按鈕）的容器內，就像一個div，你可以做一些更直接的找到匹配input：

var val = $(this).closest('div').find('input').val(); 

例如

$(".CatDelete").click(function() { 
    var val = $(this).closest('div').find('input').val(); 
    console.log("The value for the checkbox is: " + val); 
}); 

Live Working Copy | Source