如何獲取復選框值onclick提交按鈕？

Question

在這段代碼中，我有多個復選框，即name="recruiter_id"和多個提交按鈕。 現在，當我單擊第一行提交按鈕時，會發生什么警報數據，但是當我單擊最后一行提交按鈕時，它會顯示錯誤的recruiter_id我不知道為什么？ 那么，如何在不同的“提交”按鈕上獲得不同的recruiter_id onclick ？ 請幫我。

<?php
    foreach($wishlist as $row)
    {
?>
        <tr>
            <td>
                <input type="checkbox" name="recruiter_id" value="<?php echo $row['rid']; ?>" class="recruiter_id">
            </td>
            <td>
                <input type="submit" id="<?php echo $row['job_id']; ?>" class="btn btn-danger job_id" value="Assign" />
            </td>
        </tr>
<?php
    }
?>
<script>
    $(document).ready(function() {
        $(".job_id").click(function(e){
            e.preventDefault();
            job_id = this.id;
            recruiter_id = $("input[name='recruiter_id']:checked").val();
            alert(job_id);
            alert(recruiter_id);
        });
    });
</script>

Answer 1

試試這個

<?php
foreach($wishlist as $row)
  {
?>
    <tr>
        <td>
            <input type="checkbox" name="recruiter_id" value="<?php echo $row['rid']; ?>" class="recruiter_id">
        </td>
        <td>
            <input type="submit" id="<?php echo $row['job_id']; ?>" data-val="<?php echo $row['rid']?>" class="btn btn-danger job_id" value="Assign" />
        </td>
    </tr>
 <?php
  }
 ?>
   <script>
    $(document).ready(function() {
    $(".job_id").click(function(e){
        e.preventDefault();
        job_id = this.id;
        recruiter_id = $(this).data("val");
        //$("input[name='recruiter_id']:checked").val();
        alert(job_id);
        alert(recruiter_id);
    });
});

Answer 2

您可以嘗試document.getElementById（“復選框的#yourid”）。val（）它將為您提供值

Answer 3

首先，將輸入類型更改為button而不是Submit：

<input type="button" id="<?php echo $row['job_id']; ?>" data-val="<?php echo $row['rid']?>" class="btn btn-danger job_id" value="Assign" />

然后在click事件中轉到父tr並檢查id，然后使用.closest()和:checked相關復選框：

 $(document).ready(function() { $(".job_id").click(function(e) { e.preventDefault(); var job_id = this.id; var recruiter_id = $(this).closest('tr').find("input[name='recruiter_id']:checked").val(); console.log('job ID : ' + job_id + ' --- Recruiter ID:' + recruiter_id); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border=1> <tr> <td> <input type="checkbox" name="recruiter_id" value="1" class="recruiter_id">1 </td> <td> <input type="button" id="1" class="btn btn-danger job_id" value="Assign" /> </td> </tr> <tr> <td> <input type="checkbox" name="recruiter_id" value="2" class="recruiter_id">2 </td> <td> <input type="button" id="2" class="btn btn-danger job_id" value="Assign" /> </td> </tr> <tr> <td> <input type="checkbox" name="recruiter_id" value="3" class="recruiter_id">3 </td> <td> <input type="button" id="3" class="btn btn-danger job_id" value="Assign" /> </td> </tr> </table>