OnClick时获取JavaScript或JQuery值的Checkbox

时间:2014-12-30 14:52:04

标签: javascript jquery html asp.net checkbox

我有一个Checkbox我需要在选中时获取复选框的值。无论是在JavaScript还是jquery。我已将ASPX代码放在下面。这应该在IE中工作,而我正在尝试它显示响应为" on"而非价值。

ASPX代码:

<asp:TemplateField>
    <HeaderTemplate>
        <asp:CheckBox ID="CHK_STY_ALL" 
                      runat="server" 
                      onclick="javascript:Selectallcheckbox(this);" />
    </HeaderTemplate>
    <ItemTemplate>
        <asp:CheckBox ID="CHK_STY" 
                      runat="server" 
                      onclick="javascript:SelectallColorsForStyle(this,value);" 
                      CssClass="checkboxselection" 
                      Text='<%#Eval("STY_NBR")%>' />
    </ItemTemplate>
</asp:TemplateField>

JavaScript和JQuery:

<script language="javascript" type="text/javascript">
    function Selectallcheckbox(val) {
        if (!$(this).is(':checked')) {
            $('input:checkbox').prop('checked', val.checked);
        } else {
            $("#chkroot").removeAttr('checked');
        }
    }
</script>
<script type="text/javascript">
    function SelectallColorsForStyle(e,val) {
        var IDValue = $(e).attr('id');

        var StyleNumber = document.getElementById(IDValue).value;
        alert(StyleNumber);
    }
</script>

enter image description here

显示价值为&#34; ON&#34;而不是显示复选框旁边的原始值。

2 个答案:

答案 0 :(得分:3)

ASP.Net CheckBox呈现为输入标签

<span class="checkboxselection">
    <input id="GridView1_CHK_STY_0" 
        type="checkbox" 
        name="GridView1$ctl02$CHK_STY" 
        onclick="javascript: SelectallColorsForStyle(this, value);" />
    <label for="GridView1_CHK_STY_0">100005</label>
</span>

因此,您需要选择兄弟标签的文字。

<script type="text/javascript">
    function SelectallColorsForStyle(e, val) {
        var label = $(e).siblings("label");
        alert(label.text());
    }
</script>

enter image description here

答案 1 :(得分:2)

我不知道asp实现,但是这个脚本对你有用。

<input type="checkbox" id="check-demo" value="some value" onchange="Selectallcheckbox(this)"/>

<script>
function Selectallcheckbox(element){
  alert(element.value);
}
</script>

如果您使用的是jQuery,那么下面的代码段将适用于您

$("#check-demo").click(function(){
 if($(this).is(":checked")) {
   alert($(this).val());     
   }
});