需要在 php 中使用 jquery 获取 Checked 输入和复选框值

Question

我有表数据（从 mysql 表中检索数据并提取到表中）。表包含几条记录。当我单击 php 中的按钮时，我想显示带有输入框值和复选框的选中复选框值。选中的复选框值和选中的输入已使用连接功能正确显示。但检查复选框未正确显示。在我的代码中，当我单击按钮时，会显示所有选中的检查值。我的问题是使用连接功能仅显示带有 checkbax 的选中复选框。

我的桌子：

   <table border="0" cellpadding="10" cellspacing="1" width="500" class="tblListForm">
    <tr class="listheader">
    <td></td>
   <td>Username</td>
   <td>First Name</td>
   <td>Last Name</td>
   <td>Permissions</td>
   <td>CRUD Actions</td>
   </tr>
   <?php
      $i=0;
      while($row = mysqli_fetch_array($result)) {
       if($i%2==0)
       $classname="evenRow";
        else
       $classname="oddRow";
          ?>
       <tr class="<?php if(isset($classname)) echo $classname;?>">
        <td><input type="checkbox" class="chk_id" name="chk_id" id="chk_id" value="<?php  echo $row["userId"]; ?>" /></td>
        <td><?php echo $row["userName"]; ?></td>
        <td><input type="text" name="firstName" class="firstName" id="firstName" value="<?php echo $row["firstName"];?>" /></td>
       <td><?php echo $row["lastName"]; ?></td>
      <td><input type="checkbox" name="grant" class="grant" id="grant" value="Y" /></td>
       <td><a href="edit_user.php?userId=<?php echo $row["userId"]; ?>" class="link"><img alt='Edit' title='Edit' src='images/edit.png' width='15px' height='15px' hspace='10' /></a>  <a href="delete_user.php?userId=<?php echo $row["userId"]; ?>"  class="link"><img alt='Delete' title='Delete' src='images/delete.png' width='15px' height='15px'hspace='10' /></a></td>
            </tr>
       <?php
       $i++;
       }
        ?>
      </table>
         <input type="button"  id="save_value" name="save_value" value="Save" />

我尝试过的 jquery 代码：

   $('#save_value').click(function () {
            alert("Checkbox running");
                var chk_id = [];
                 var firstName = [];
                  var grant = [];


                 $.each($("input[ id='chk_id']:checked"), function () {
                      chk_id.push($(this).val());
                      firstName.push($(this).parent().parent().find("#firstName").val()); 
                       grant.push($(this).parent().parent().find($("#grant").is(':checked'));
                });

                alert(chk_id);
                alert(firstName);
                alert(grant);
            });

这里，

正在检查复选框并检查输入值。我的问题是用检查值显示选中的复选框。

谢谢@

Answer 1

你犯了一些小错误：

• 您不能有多个具有相同 ID 的元素，ID 必须是唯一的。因此，我从您的 HTML (id="chk_id",id="firstName",id="grant") 中删除了所有重复的 ID，并在您的 JS 中使用了这些类。
• 您错过了grant.push($(this).parent().parent().find($(".grant").is(':checked'))); 中的右括号。
• .find($(".grant").is(':checked')) 没有按预期工作，也没有必要。
  改用这个：.find(".grant:checked")。
• 最后，无论复选框是否被选中，您的警报都会显示两个值的原因：grant.push( ... ); 总是将某些内容推送到数组中，如果 jQuery 选择器不匹配任何内容并返回 false，该值仍然会被推入数组。
  事实上，如果你纠正了以上三点，并且不勾选权限复选框，那么数组中的值将是undefined。如果您选中该框，它将是Y。
  
  因此，为了使其工作，您只需将 grant.push( ... ); 放在 if 子句中，您可以在其中检查 ".grant:checked":
  if ($p.find(".grant:checked").length) {grant.push($p.find(".grant:checked").val());}
  
  - @987654335 @ 代表 $(this).parent().parent()，我在 var 中存储了一个引用。
  - .length 检查返回对象的长度是否大于 0。没有它，if 子句仍将始终为 true，因为 jQuery 仍然返回一个对象（值为 undefined）。

请参阅下面的 code sn-p 以获取演示：

$('#save_value').click(function() {
  var chk_id=[], firstName=[], grant=[];
  
  $.each($("input[class='chk_id']:checked"),function() {
    var $row = $(this).parent().parent();
    chk_id.push($(this).val());
    firstName.push($row.find(".firstName").val()); 
    if ($row.find(".grant:checked").length) {grant.push($row.find(".grant:checked").val());}
  });
  
  console.log(chk_id, firstName, grant);
});

table,input[type=button] {float:left;} /*ONLY SO console.log() DOESN'T COVER BUTTON*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="0" cellpadding="0" cellspacing="0" width="500" class="tblListForm">
  <tr class="listheader"><td></td><td>Username</td><td>First Name</td><td>Last Name</td><td>Permissions</td></tr>
  
  <tr class="evenRow">
    <td><input type="checkbox" class="chk_id" name="chk_id" value="4" /></td>
    <td>sardhar</td>
    <td><input type="text" name="firstName" class="firstName" value="sardhar" /></td>
    <td>mohamed</td>
    <td><input type="checkbox" name="grant" class="grant" value="Y" /></td>
  </tr>
  
  <tr class="oddRow">
    <td><input type="checkbox" class="chk_id" name="chk_id" value="3" /></td>
    <td>fg</td>
    <td><input type="text" name="firstName" class="firstName" value="vb" /></td>
    <td>vb</td>
    <td><input type="checkbox" name="grant" class="grant" value="Y" /></td>
  </tr>
</table>

<input type="button" id="save_value" name="save_value" value="Save" />

jsfiddle：https://jsfiddle.net/3utno9at/