使用jQuery动态获取复选框选中状态 [英] Dynamically getting check box checked state with jQuery

问题描述

我有一个带有复选框的值表.我的目标是设置复选框，以便根据其是true还是false切换复选框时，使用ajax调用在数据库中设置一个值.
这是表格的示例:

 <  表   类  ="  > 
    <   thead  > 
        <   tr     ="   usersListHead" <  第 >  ID <  /th  > 
            <   th  > 标题<  /th  > 
            <  第 > 日期<  /th  > 
            <   th  >  Display <  /th  > 
            <   th  > 编辑<  /th  > 
            <   th  > 删除<  /th  > 
        <  /tr  > 
    <  /thead  > 
    <  正文    ="   eventsTable" <   tr  > 
            <   td     ="   id" <  > 
            <   td     ="   title" <  > 
            <   td     ="   date" <  > 
            <   td     ="   display" <    类  ="  >  <  输入   类型  ="   id    displayCheck" 值   display" > 显示事件<  /label  >  <  /td  > ; 
            <   td  >  <  输入    ="   btn" 类型  ="     id   ="  值     >/ >  <  /td  > 
            <   td  >  <  输入    ="   btn" 类型  ="     id   ="  值     / >  <  /td  > 
        <  /tr  > 
    <  /tbody  > 
<  /table  >  

这是将处理程序附加到事件的代码(不确定这是否是正确的表达方式):

 $(" ).delegate( #displayCheck"， ，toggleDisplay)； 

我一直试图获取toggleDisplay函数的功能是使用event.target获取被单击的复选框是选中还是未选中.
由于表中的每个复选框都具有相同的名称并且是动态加载的，因此我无法使用ID进行选择，我需要选择位于同一tr标记中的"#displayCheck".我尝试了类似于以下代码的代码，该代码用于在单击编辑按钮时获取条目的ID:

 id = $(event.target).parent().siblings(" ).html(); 

但是，我使用上述代码的不同变体的所有尝试均失败了.

解决方案

(" ).delegate(" ， 点击"，toggleDisplay);

我一直试图获取toggleDisplay函数的功能是使用event.target获取被单击的复选框是选中还是未选中.
由于表中的每个复选框都具有相同的名称并且是动态加载的，因此我无法使用ID进行选择，我需要选择位于同一tr标记中的"#displayCheck".我尝试了类似于以下代码的代码，该代码用于在单击编辑按钮时获取条目的ID:

 id = 

(event.target).parent().siblings(" #id").html();

但是，我使用上述代码的不同变体的所有尝试均失败了.对此将提供任何帮助.

您写道，您不能使用ID，但是您的jsvascript代码依赖它.您可以使用JQuery选择器将事件处理程序添加到所有复选框(或具有特定类的所有复选框...).

 <   html  > ; 
<  头部 > 
 <  脚本    ="   http://code.jquery.com/jquery-latest. js" <  > 
<  /head  > 
<  正文 > 
<  表    ="  表" <   thead  > 
        <   tr     ="   usersListHead" <  第 >  ID <  /th  > 
            <   th  > 标题<  /th  > 
            <  第 > 日期<  /th  > 
            <   th  >  Display <  /th  > 
            <   th  > 编辑<  /th  > 
            <   th  > 删除<  /th  > 
        <  /tr  > 
    <  /thead  > 
    <  正文    ="   eventsTable" <   tr  > 
            <   td     ="   id" <  > 
            <   td     ="   title" <  > 
            <   td     ="   date" <  > 
            <   td     ="   display" <    类  ="  >  <  输入   类型  ="  值  显示" <  /label  >  <  /td  > 
            <   td  >  <  输入    ="   btn" 类型  ="     id   ="  值     >/ >  <  /td  > 
            <   td  >  <  输入    ="   btn" 类型  ="     id   ="  值     / >  <  /td  > 
        <  /tr  > 
    <  /tbody  > 
<  /table  > 

<  脚本 >  

I have a table of values with a check box. My goal is to setup the check box so that when it is toggled depending on whether it''s true or false set a value in a database using an ajax call.
Here''s an example the table:

<table class="table">
    <thead>
        <tr id="usersListHead">
            <th>ID</th>  
            <th>Title</th>  
            <th>Date</th>  
            <th>Display</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody id="eventsTable">
        <tr>  
            <td id="id">1</td>  
            <td id="title">Some title</td>
            <td id="date">1/1/2012</td>
            <td id="display"><label class="checkbox"><input type="checkbox" id="displayCheck" value="display"> Display event</label></td>
            <td><input class="btn" type="submit" id="delete" value="Delete" /></td>  
            <td><input class="btn" type="submit" id="edit" value="Edit Event" /></td>  
        </tr>
    </tbody>
</table>

Here''s the code that attaches the handler to the event (not sure if that''s the proper way to say this):

$("td").delegate("#displayCheck", "click", toggleDisplay);

What I''ve been trying to get the the toggleDisplay function to do is using the event.target get whether the clicked check box is check or unchecked.
Since each check box in the table has the same name and is loaded dynamically I can''t use the ID to select it I need to select "#displayCheck" that is in the same tr tag. I''ve tried code similar to the following that is used to get the ID of an entry when the edit button is clicked:

id=$(event.target).parent().siblings("#id").html();

However all my attempts using different variations of the above code have failed. Any help on this would be greatly appreciated.

解决方案

("td").delegate("#displayCheck", "click", toggleDisplay);

What I''ve been trying to get the the toggleDisplay function to do is using the event.target get whether the clicked check box is check or unchecked.
Since each check box in the table has the same name and is loaded dynamically I can''t use the ID to select it I need to select "#displayCheck" that is in the same tr tag. I''ve tried code similar to the following that is used to get the ID of an entry when the edit button is clicked:

id=

(event.target).parent().siblings("#id").html();

However all my attempts using different variations of the above code have failed. Any help on this would be greatly appreciated.

You wrote, that you can not use ID''s but your jsvascript code is relying on it. You can use JQuery selectors to add event handler to all checkboxes (or all checkboxes with of a specific class...).

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table">
    <thead>
        <tr id="usersListHead">
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
            <th>Display</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody id="eventsTable">
        <tr>
            <td id="id">1</td>
            <td id="title">Some title</td>
            <td id="date">1/1/2012</td>
            <td id="display"><label class="checkbox"><input type="checkbox" value="display"> Display event</label></td>
            <td><input class="btn" type="submit" id="delete" value="Delete" /></td>
            <td><input class="btn" type="submit" id="edit" value="Edit Event" /></td>
        </tr>
    </tbody>
</table>

<script>

这篇关于使用jQuery动态获取复选框选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！