javascript – 标题复选框检查gridview行,但是界面显示否则

我在更新面板(网络表单)中有一个gridview.网格视图有一个标题复选框,因此当您单击标题复选框时,它会检查它下面的所有项目复选框,如下所示:
<asp:TemplateField>
         <HeaderTemplate>
              <asp:CheckBox ID="HeaderLevelCheckBox" runat="server" 
                onclick="toggleSelection(this);" ToolTip="Select / Deselect all rows?" />
         </HeaderTemplate>
         <ItemTemplate>
            <asp:CheckBox ID="chkSelector" runat="server" ToolTip="Select row?" />
         </ItemTemplate>
</asp:TemplateField>

注意函数调用onclick =“toggleSelection(this);”这看起来像这样:

function toggleSelection(source) {
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
            $(this).attr('checked',source.checked);
            if (source.checked)
                $(this).css({ backgroundColor: "yellow" });
            else
                $(this).css({ backgroundColor: "" });
        });
    }

这是在document.ready在script标签之后声明的.当我最初加载页面并单击headercheckbox时,gridview中的所有行也被选中(很棒……有效).如果我取消选中它,所有行都将被取消选中(很棒).当我再次点击它时,UI不会改变(所有项目都不会像它们应该那样被检查).

我很好奇,在检查标记时也是对的,当我点击标题将其检查为true时,我得到了检查的行项:

< input id =“MainContent_gvCG_chkSelector_5”type =“checkbox”name =“ctl00 $MainContent $gvCG $ctl08 $chkSelector”style =“background-color:rgb(255,255,0);”检查= “检查” > 当我取消选中标题时,它会像这样正确响应: < input id =“MainContent_gvCG_chkSelector_5”type =“checkbox”name =“ctl00 $MainContent $gvCG $ctl08 $chkSelector”style =“”>

我的问题是UI没有改变,这意味着即使标记显示正在检查,复选框也不会显示为被检查.这是因为在更新面板内吗?

我该怎么做才能解决这个问题?

解决方法

尝试使用jQuery prop而不是attr,它接受一个布尔值而不是使用attr / removeAttr checked属性.

码:

function toggleSelection(source) {
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
            $(this).prop('checked',source.checked);
            if (source.checked)
                $(this).css({ backgroundColor: "yellow" });
            else
                $(this).css({ backgroundColor: "" });
        });
    }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)