如何在jquery中获取所选复选框的值?

时间:2017-02-06 10:08:21

标签: javascript jquery checkbox

您好我正在使用asp.net开发jquery应用程序。我有以下复选框列表。如果我选中任何复选框,那么我想显示它。下面是我的复选框。

  <asp:CheckBoxList ID="ChKResons" runat="server" RepeatColumns="1" RepeatDirection="Horizontal" Style="margin-bottom: 8px; margin-right: 5px;" CellPadding="5" CellSpacing="25">
                        <asp:ListItem Text="Your financial offer exceeded our budgeted amount" value="1"/>
                        <asp:ListItem Text="Your technical offer didn't comply with Oman Air's technical requirement" Value="2" />
                    </asp:CheckBoxList>

这是我的jquery代码。

 $('#ChKResons').on('click', ':checkbox', function () {
        if ($(this).is(':checked')) {
            // handle checkbox check
            alert($(this).val());
        } else {
            // checkbox is unchecked
            alert('unchecked')
        }
    });
    $('#ChKResons :checkbox').live('click', function () {
        alert($(this).is(':checked'));
    });

以上代码不起作用。我可以帮忙解决这个问题吗?帮助将不胜感激。谢谢。

2 个答案:

答案 0 :(得分:2)

使用

$(this).prop('checked') 

而不是

$(this).is(':checked')

如果您生成的HTML复选框的ID为ChKResons,请使用ID添加事件,例如:

$('#ChKResons').on('click', function () {
    alert($(this).prop('checked'));
});

仅将事件附加一次。 如果你有多个具有相同id的元素,那么删除id并在所有元素上添加一个公共类,并在类选择器上附加一个事件。

$('.commonClass').on('click', function () {
    alert($(this).prop('checked'));
});

答案 1 :(得分:0)

通常,复选框将包含更改事件。因此,使用更改而不是单击是一种很好的做法。当然点击也会有效。

<DataGridTemplateColumn Header="Wrap up" Width="100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox ItemsSource="{Binding WrapUpHelper.WrapUps}">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">
                                            <StackPanel Orientation="Horizontal">
                                                <CheckBox IsChecked="{Binding IsSelected}"
                                                          Width="20" />
                                                <TextBlock Text="{Binding FriendlyDescription}" />
                                            </StackPanel>
                                            <ListBox ItemsSource="{Binding WrapUps}"
                                                     Visibility="{Binding Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}"
                                                     BorderThickness="0"
                                                      Background="Transparent">
                                                <ListBox.ItemTemplate>
                                                    <DataTemplate>
                                                        <StackPanel Orientation="Horizontal">
                                                            <CheckBox IsChecked="{Binding IsSelected}" Width="20" />
                                                            <TextBlock Text="{Binding FriendlyDescription}" />
                                                        </StackPanel>
                                                    </DataTemplate>
                                                </ListBox.ItemTemplate>
                                            </ListBox>

                                        </StackPanel>
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>