如何获取复选框值onclick提交按钮？

Question

In this code, I have multiple checkboxes i.e. name="recruiter_id" with multiple submit button. Now, What happens when I click on the first row submit button it alert data but when I click on the last row submit button then it shows wrong recruiter_id I don't know why? So, How can I get different recruiter_id onclick different submit button? Please help me.

<?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

First of all, change the type of input to button instead of submit :

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

Then inside the click event go up to the parent tr and check id the related checkbox is checked using .closest() and :checked like :

$(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>

</div>