Question

say we have simple asp.net repeater, in a row we have one checkbox, one label (database-id of the record) and not visible (used for postback) and one text (in a tabelcell)

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

有人有这个链接或解决方案吗？也许已经使用了jQuery？

Edit: as i said, it is a asp.repeater. and the table is for layout, so using the checkbox.text property is not designable (e.g. line wrap) the ids of the checkbox and text are dynamically added/changed on rendering of the repeater. therefore the label solution does also not really work.

Answer 1

假设您不需要jQuery和表格构造。

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

this renders basically the solution provided by Ricardo Vega whatever you get in the property text of the checkbox is clickable, and checks/unchecks the checkbox ... therefor you should use <%# Eval("...") %> you can skin (via css) the margin of the label

编辑：

再考虑一次，还有另一个解决方案：

<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 元素的 Text 属性！

Answer 2

也许我没有完全理解，但为什么你不在标签标签中使用HTML属性“for”呢？

喜欢 (xǐ huān)

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

如果单击标签，则复选框将被视为已单击。因此，您不必依赖JS来执行此操作。

Edit: If you really really want to use jQuery for this:

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

根据需要更改td。

Answer 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
    }
});

Answer 4

像这样怎么样？

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

友情链接