单击文本时在中继器中选择/取消选择复选框答案

【问题标题】：checkbox select/deselect in repeater when click on text单击文本时在中继器中选择/取消选择复选框
【发布时间】：2009-01-29 10:33:24
【问题描述】：

假设我们有简单的 asp.net 中继器，在一行中，我们有一个复选框、一个标签（记录的数据库 ID）和不可见（用于回发）和一个文本（在 tabelcell 中）

现在我想让它像在 windows 中一样，如果你点击文本，复选框应该被选中或取消选中。

有人为此提供了链接或解决方案，可能已经使用 jQuery 了吗？

编辑：正如我所说，它是一个 asp.repeater。并且表格用于布局，因此使用 checkbox.text 属性是不可设计的（例如换行）复选框和文本的 id 在转发器的呈现时动态添加/更改。因此标签解决方案也不起作用。

【问题讨论】：

标签： javascript jquery asp.net repeater

【解决方案1】：

假设你不需要 jQuery 和 table-construct

<asp:Repeater runat="server">
    <ItemTemplate>
        <asp:CheckBox runat="server" Text="your text" />
    </ItemTemplate>
</asp:Repeater>

这基本上呈现了 Ricardo Vega 提供的解决方案无论你在复选框的属性文本中得到什么都是可点击的，并且选中/取消选中复选框......因此你应该使用你可以皮肤（通过css）标签的边缘

编辑：

再想一想，还有一个解决办法：

<asp:Repeater runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><asp:Checkbox runat="server" ID="checkbox" /></td>
            <td><asp:Label runat="server" AssociatedControlID="checkbox">Your text</asp:Label></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

注意：你也可以使用 asp:Label-Element 的 Text-attribute！

【讨论】：

好答案，抱歉在没有 ASP 知识的情况下回答。也许最好使用最简单的方法，而不是增加一层复杂性。
Sooooooo 很高兴我不使用 ASP ;) 但是 +1 表示不使用 javascript。

【解决方案2】：

可能我没有完全理解，但是你为什么不在label标签中使用html属性“for”呢？

喜欢：

<label for="field_id">Checkbox 1</label>
<input id="field_id" type="checkbox" />

如果标签被点击，这将使复选框被点击。所以你不必依赖 JS 来做到这一点。

编辑：如果你真的想为此使用 jQuery：

$('td').click(function(){
  $(':checkbox',this).attr('checked',!$(':checkbox',this).attr('checked'));
});

根据需要更改“td”。

【讨论】：

也许复选框需要是一个 asp 控件才能获得检查状态。因此，clientid 将被动态呈现，并且不能在标签的 itemtemplate 中使用

【解决方案3】：

如果您使用其中一种 jQuery 点击解决方案，请确保忽略复选框本身触发的点击事件。

$('td').click(function(e){
    if (!$(e.target).is(':checkbox')) { // toggle only on non-checkbox click
        var checked = $(':checkbox', this).attr('checked');
        $(':checkbox', this).attr('checked', !checked); // toggle
    }
});

【讨论】：

在我的解决方案 +1 中没有考虑到这一点

【解决方案4】：

这样的事情怎么样？

$('.yourtableclass td').click( function( e ) {
    var cb = $(this).children('input[type=checkbox]').get(0);
    cb.checked = !cb.checked;
});

【讨论】：