Question

我已动态创建了一个GridView。此动态gridview有两个Template Field列。这两列都有每行的复选框。如何编写客户端验证，以便在特定行的给定时间只检查一个复选框。

我尝试使用此代码，但它无效

  function MutExcCheckBox()
  { 
    var wipChk = document.getElementById("ckhBoxSelect");
    var aukChk = document.getElementById("chkBoxABC");
    for(i = 0; i<wipChk.length ; i++)
    {
        if(wipChk[0].checked==true)
        {
          aukChk[0].checked=false;

        }else if (aukChk[0].checked==true)
        {
            wipChk[0].checked=false;
        }
    }

我已经从代码中添加了Onclick属性。

ckh.Attributes.Add("Onclick", "MutExcCheckBox()");

由于

Answer 1

首先转到jQuery站点并下载最新版本的jQuery。在您的页面中包含此内容。

编辑： - 我很抱歉，第一个解决方案对你不起作用。实际上当GridView和其中包含的控件被渲染时，它们被包裹在一边不知道是什么:) 这是aspx代码：

<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Checkbox 1">
            <ItemTemplate>
                <asp:CheckBox ID="chkFrist" CssClass="chk1" runat="server" 
                          Text='<%# Eval("Chk1") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Checkbox 2">
            <ItemTemplate>
                <asp:CheckBox ID="chkSecond" CssClass="chk2" runat="server" 
                         Text='<%# Eval("Chk2") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

JS（jQuery），你可以在body标签或head head之前的任何地方添加它。我更喜欢在关闭 body 标记之上添加脚本，并在 head 标记内包含外部脚本。

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $(".chk1 :checkbox, .chk2 :checkbox").click(function() {
            checkGrid(this);
        });
    });

    function checkGrid(elem) {
        var chkd = $(elem).attr("checked");
        //WHEN YOU SPECIFY CSSCLASS ON CHECKBOX IT IS WRAPPED 
        //INSIDE A SPAN ELEMENT WITH GIVEN CLASS
        var cls = $(elem).parent().attr("class");

        if (chkd) {
            if (cls == "chk1")
                $(elem).parents("tr").find(".chk2  :checkbox")
                           .attr('checked', !chkd);
            else
                $(elem).parents("tr").find(".chk1 :checkbox")
                           .attr('checked', !chkd);
        }
    }
</script>

动态网格视图的Javascript验证具有复选框

1 个答案: