需要獲取使用jQuery的經過輸入和複選框值在PHP

Question

上午有表數據（檢索從MySQL表中的數據，並獲取到表）。表包含幾個記錄。我想顯示覆選框的值與輸入框值和複選框，當我點擊按鈕在PHP中。選中的複選框值和選中的輸入已使用連接功能正確顯示。但用複選框檢查顯示不正確。在我的代碼中，當我點擊按鈕時，顯示所有選中的檢查值。我的問題顯示只checkbox複選框使用連接函數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")。
• 最後，爲什麼你的alert會顯示兩個值，不管複選框是否被選中：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/