單擊按鈕時，獲取相同類別但復選框的差異ID的值

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

實時工作副本 | 資源

但是我想我可能會稍微調整一下結構，以免您無法瀏覽類似的兄弟元素。 如果將每對（復選框和按鈕）放在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);
});

實時工作副本 | 資源