单击文本时复选框在转发器中选择/取消选择

时间:2009-01-29 10:33:25

标签: javascript jquery asp.net repeater

说我们有简单的asp.net转发器, 在一行中我们有一个复选框,一个标签(记录的数据库ID)和不可见(用于回发)和一个文本(在一个tabelcell中)

现在我希望像在Windows中一样,如果单击文本,则应选中或取消选中复选框。

有人为此提供了链接或解决方案,可能已经有了jQuery吗?

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

4 个答案:

答案 0 :(得分:8)

假设你不需要jQuery和table-construct

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

这基本上呈现了Ricardo Vega提供的解决方案 无论你在复选框的属性文本中得到什么都是可点击的,并选中/取消选中复选框...因此你应该使用&lt;%#Eval(“...”)%&gt; 你可以皮肤(通过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!

答案 1 :(得分:4)

也许我完全不明白,但为什么不在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'。

答案 2 :(得分:1)

如果您使用其中一个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
    }
});

答案 3 :(得分:0)

这样的事情怎么样?

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