jQuery，如何獲取表格行中特定複選框的值？

Question

我有多行的表，但它的行cotain 3複選框和按鈕。現在，我想要更新數據庫表相對於此按鈕和複選框。但是，問題在於，當我單擊每行按鈕時，我無法獲得複選框的值。請找到下面的代碼，並讓我知道如何獲得每行按鈕的值。

<table width="100%"> 
    <tr class="tbrow"> 
    <td width="12%"> 
     <span class="name">test.html</span> 
    </td> 
    <input type="hidden" value="0" class="file_id" /> 
    <td width="5%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="read" title="read" /> Read 
     </span> 
    </td> 
    <td width="5%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="write" title="write" /> Write 
     </span> 
    </td> 
    <td width="7%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="download" title="download" /> Download 
     </span> 
    </td> 
    <td width="5%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="share" title="share" /> Share 
     </span> 
    </td> 
    <td width="80%"> 
     <span class="action"> 
     <input type="submit" name="assign" class="assign" title="Submit" value="Submit" /> 
     </span> 
    </td> 
    </tr> 
    <tr class="tbrow"> 
    <td width="12%"> 
     <span class="name">testing.doc</span> 
    </td> 
    <input type="hidden" value="1" class="file_id" /> 
    <td width="5%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="read" title="read" /> Read 
     </span> 
    </td> 
    <td width="5%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="write" title="write" /> Write 
     </span> 
    </td> 
    <td width="7%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="download" title="download" /> Download 
     </span> 
    </td> 
    <td width="5%"> 
     <span class="action"> 
     <input type="checkbox" value="1" class="share" title="share" /> Share 
     </span> 
    </td> 
    <td width="80%"> 
     <span class="action"> 
     <input type="submit" name="assign" class="assign" title="Submit" value="Submit" /> 
     </span> 
    </td> 
    </tr> 
</table> 

現在，當我點擊第一行的讀取複選框，然後點擊提交，就應該皮卡類=「file_id的」價值的潛在價值以及這個價值。

同樣，當我點擊第二行提交時，它應該只取第二行中的那些複選框值，反之亦然。

請檢查並幫助我解決問題。

提前感謝您的時間。

謝謝！ Robin

Answer 1

使用此代碼

• 工作DEMO這裏 jsFiddle

  $（函數（）{ $（ 「分配」）。點擊（函數（）{

  var chk = $(this).closest('tr').find('input:checkbox'); 
      var fileid=$(this).closest('tr').find('.file_id').val(); 
      alert("File ID : " +fileid); 
      alert("read :" +chk[0].checked); 
      alert("Write: " +chk[1].checked); 
      alert("Download: "+ chk[2].checked); 
  
  }); 
       }); 
  

Answer 2

複選框的值在未選中時設置爲null，在選中時爲「on」，因此需要放置一些邏輯服務器端來處理它，因爲如果提交您將會得到類似「1」的值：「on」 將值更改爲「讀取」「寫入」等，並且當它不爲空時使用它

Answer 3

您可以使用此jQuery代碼來查找與特定單擊按鈕和file_id對應的選中複選框的類：

$('.assign').click(function(){ 
    console.log($(this).closest('tr').find('.file_id').val()); 

    $(this).closest('tr').find('input[type=checkbox]:checked').each(function(){ 
    console.log($(this).attr('class')); 
    }); 
}); 

您可以使用所需的classes和file_id。

Answer 4

在事件處理程序中，this引用事件觸發的元素。使用當前元素可以遍歷重複元素的最高級別，在這種情況下，它將是<tr>，然後在該主元素中進行所有後續搜索。

$('.assign').click(function(){ 
    var $row = $(this).closest('tr'); 
    var thisRowFileID = $row.find('.file_id').val(); 
    var thisRowCheckedCheckboxs = $row.find(':checkbox:checked'); 
    /* do something with collection of checked checkboxes*/ 
});