使用单选按钮时,我试图隐藏div,不显示复选框列表[控件本身]

时间:2012-11-21 05:17:06

标签: asp.net checkboxlist

脚本:

    $(document).ready(function () {
          $('#Custom').hide('fast'); 
          $('#rbtnEntire').click(function () {
             $('#Custom').hide('fast');
            $('#Entire').show('fast');
            });

          $('#rbtnCustom').click(function () {
            $('#Entire').hide('fast');
            $('#Custom').show('fast');
           });
      });

    function showdiv() {
        document.getElementById("divChkList").style.display = "block";
     }

aspx文件:

<div style="height:700; width:500;">
<div id="select scan type">
    <asp:RadioButton ID="rbtnEntire" runat="server" Text="Entire" 
        GroupName="s1"/>
    <asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom" 
        GroupName="s1"/>
</div>
<div id="Entire" style="float:left; height:1000; width:1000; border: solid 1px;  margin-left:5px;">
    Entire<br />
    <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True" ExpandDepth="2">
     <Nodes>
     <asp:TreeNode Text="Entire">
          <asp:TreeNode Text="VM">
            <asp:TreeNode Text="MBS1">   
        </asp:TreeNode>
        <asp:TreeNode Text="PF1"></asp:TreeNode>
        </asp:TreeNode>


        <asp:TreeNode Text="VM1">
        <asp:TreeNode Text="MBS2"></asp:TreeNode>
        <asp:TreeNode Text="PF2"></asp:TreeNode>
        </asp:TreeNode>

    </asp:TreeNode>
    </Nodes>
    </asp:TreeView>
        <p>
    <asp:Button ID="btnCreateXML" runat="server" onclick="btnCreateXML_Click" 
        Text="Create XML" />
   <asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label>
   </p></div>
   <div id="Custom" style="float:left; height:1000; width:2000; border: solid 1px; margin-left:10px;">

    Custom <br />
    <div id="Manual" style="border:solid 1px; float:left;">
        Manual Scan Controls
    </div>

    <div id="Multiple" style="border:solid 1px; float:left;">
    Multiple Scan Controls
        <table>
                <tr>
                    <td valign="top" style="width: 165px">  
                          <asp:PlaceHolder ID="phDDLCHK" runat="server"></asp:PlaceHolder>
                    </td>
                    <td valign="top">
                          <asp:Button ID="btn" runat="server" Text="Get Checked" OnClick="btn_Click" />
                    </td>
                    <td valign="top">
                          <asp:Label ID="lblSelectedItem" runat="server"></asp:Label>
                    </td>
              </tr>
        </table>
     </div>
     <asp:HiddenField ID="hidList" runat="server" />
    </div>
   <br />
   </div>
代码背后的代码:

 protected void Page_Load(object sender, EventArgs e)
 {


    if (!IsPostBack)
    {
        initialiseCheckBoxList();
        rbtnEntire.Checked = true;
        try
        {
            TreeView1.Attributes.Add("onclick", "javascript: OnTreeClick();");
        }
        catch(Exception)
        {
            Response.Write("Error Occured While onTreeClick");
        }
    }
}
  public void initialiseCheckBoxList()
  {

   CheckBoxList chkBxLst = new CheckBoxList();
   chkBxLst.ID = "chkLstItem";
    chkBxLst.Attributes.Add("onmouseover", "showdiv()");
    DataTable dtListItem = GetListItem();
    int rowNo = dtListItem.Rows.Count;
    string lstValue = string.Empty;
    string lstID = string.Empty;
    for (int i = 0; i < rowNo - 1; i++)
    {
        lstValue = dtListItem.Rows[i]["Value"].ToString();
        lstID = dtListItem.Rows[i]["ID"].ToString();
        chkBxLst.Items.Add(lstValue);
    }
    System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
    div.ID = "divChkList";
    div.Controls.Add(chkBxLst);
    div.Style.Add("border", "black 1px solid");
    div.Style.Add("width", "160px");
    div.Style.Add("height", "130px");
    div.Style.Add("overflow", "AUTO");
    div.Style.Add("display", "block");


   }//end of initialiseCheckBoxList()
  protected void btn_Click(object sender, EventArgs e)
   {
    string x=string.Empty;
    string strSelectedItem = "Selected Items ";
    CheckBoxList chk = (CheckBoxList)phDDLCHK.FindControl("chkLstItem");    // phDDLCHK is placeholder's ID

    for (int i = 0; i < chk.Items.Count; i++)
    {
        if (chk.Items[i].Selected)
        {
            if (strSelectedItem.Length == 0)
            {
                       strSelectedItem = strSelectedItem + ":" + chk.Items[i].Text;

            }
            else
            {
                strSelectedItem = strSelectedItem + ":" + chk.Items[i].Text;
                                }
        }
    }
           lblSelectedItem.Text =strSelectedItem;
  }

  public DataTable GetListItem()  
  {
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("Value", typeof(string));

    for (int icnt = 0; icnt < 10; icnt++)
    {
        table.Rows.Add(icnt, "ListItem"+":"+icnt);
    }
    return table;
}

问题:当我选择单选按钮rbtnCustom时,它应该显示div Custom以及CheckboxList控件,这不会发生。当我不隐藏div时,会显示它。可以用什么来显示checkboxList控件? 这是我的代码,任何人都可以告诉我哪里出错了? 任何帮助都会得到满足!谢谢!

2 个答案:

答案 0 :(得分:0)

您的某些Javascript无法正常工作的原因是您在客户端(Javascript)代码中使用服务器 ID。

<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom" 
        GroupName="s1"/>

由于上述控制设置为runat="server",ID属性正在设置服务器端控制ID,因此将生成客户端ID。如果您不需要在服务器上访问此控件,则可能更容易使用'input'元素而不是asp.net控件。另一个选项是设置ClientIDMode="Static",以便客户端ID与服务器ID相同。

<asp:RadioButton ID="rbtnCustom" runat="server" Text="Custom" ClientIDMode="Static"
            GroupName="s1"/>

如果您未在后面的代码中设置ID并且在客户端Javascript中使用ID,则将此用于任何控件。

编辑:您在phDDLCHK.Controls.Add(div);方法结束时也遗漏了initialiseCheckBoxList

你也没有提供什么javascript“OnTreeClick();”是。它在后面的代码中被引用。据我所知,你只是在initialiseCheckBoxList上填充一次自定义复选框列表的内容。

答案 1 :(得分:0)

如何将asp复选框控件用作RadioButton

首先我们创建一个这样的脚本:

  <script type="text/javascript">
    function check(sender) {
        var chkBox;
        var i;
        var j;
        for (i = 1; i < 6; i++) {
            for (j = 1; j < 6; j++) {
                if (i != j) {
                    if (sender.id == "ck" + i) {
                        chkBox = document.getElementById("ck" + j);
                    }
                    else {
                        chkBox = document.getElementById("ck" + i);
                    }
                    if (sender.checked) {
                        if (chkBox.checked) {
                            chkBox.checked = false;
                        }
                    }
                }
            }
        }
    }
 </script>

现在我们为ASP CheckBox控件使用以下代码

    <div>
    <asp:CheckBox ID="ck1" runat="server" Text="P1" onclick="check(this)"/>
    <asp:CheckBox ID="ck2" runat="server" Text="P2" onclick="check(this)"/>
    <asp:CheckBox ID="ck3" runat="server" Text="P3" onclick="check(this)"/>
    <asp:CheckBox ID="ck4" runat="server" Text="P4" onclick="check(this)"/>
    <asp:CheckBox ID="ck5" runat="server" Text="P5" onclick="check(this)"/>
   </div>

谢谢......