如何在单击提交按钮时获取复选框值？

Posted 2023-05-08

【中文标题】如何在单击提交按钮时获取复选框值？

【英文标题】：How to get checkbox value onclick submit button?

【发布时间】：2019-08-22 12:55:48

【问题描述】：

在这段代码中，我有多个复选框，即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>

【问题讨论】：

首先，您的提交按钮必须在 for 循环之外。你可以foreach($wishlist as $k => $row) 和name="recruiter_id<?php echo $k; ?>" $("input[name^='recruiter_id']:checked") 应该可以解决问题

先到父tr（通过jQuery的.parents()，然后在其中找到复选框输入。

您是否希望在单击分配按钮时检查所有招聘人员 ID？为什么你有更多的提交按钮？你能在你的问题中解释更多吗？

先生，请看一次我试图解释更多@Nick

【参考方案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);
    );
);

【参考方案2】：

首先，将输入的类型改为button，而不是提交：

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

然后在点击事件中转到父 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>

【参考方案3】：

你可以试试 document.getElementById("#yourid of checkbox").val() 它会给你价值