Jquery EasyUI-如何在easyui-datagrid表td中选中或不选中复选框

问题描述 投票:2回答:1

我是jeasyui的新手。我使用easyui-datagrid生成动态表,并且必须为每一行启用复选框。现在我希望在选中时获取每一行详细信息,并取消选中特定行的复选框。

<table id="process-list" title="Video Processing" class="easyui-datagrid" style="width:700px;height:250px"
        url="$/emplyoee/getfiles.action"
        idField="itemid">
    <thead>
        <tr>
     <th field='ck' checkbox="true"  type="checkbox" ></th> 
             <th field="id" width="50" >Id</th>              
            <th  field="createDate" width="50" >CreateDate</th>
            <th field="product" width="50">Product</th>             
            <th field="no.Files" width="50">No.Files</th>
            <th field="status" width="50">Status</th>
            <th field="cycle" width="50">Cycle</th>
        </tr>
    </thead>
</table>

$(document).ready(function() { 
$('input[name="ck"]').click(function(){
if($(this).prop("checked") == true){
    alert("Checkbox is checked.");
}
else if($(this).prop("checked") == false){
    alert("Checkbox is unchecked.");
}  

});

我试过点击功能,但它不起作用。 });

jquery-easyui
1个回答
0
投票

$('table').on('click','td input',function(){
if($(this).prop("checked") == true){
    alert("Checkbox is checked.");
}
else if($(this).prop("checked") == false){
    alert("Checkbox is unchecked.");
}  

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
   <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
   <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
   <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
   <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
</table>
© www.soinside.com 2019 - 2024. All rights reserved.