需要使用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（ id="chk_id" ， id="firstName" ， id="grant" ），并在您的JS中改用了这些类。
• 您错过了grant.push($(this).parent().parent().find($(".grant").is(':checked')));中的grant.push($(this).parent().parent().find($(".grant").is(':checked')));括号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());}
  
  - $p代表$(this).parent().parent() ，我在var存储了一个引用。
  .length检查返回的对象的长度是否大于0 。 没有它，if子句仍然始终为true ，因为jQuery仍然返回一个对象（值undefined ）。

有关演示，请参见下面的代码片段 ：

 $('#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/