需要使用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/