Question

我有一种情况，我必须根据复选框选择显示/隐藏DIV TAG。下面是代码示例

<asp:RadioButtonList ID="ckbRestaurent" runat="server"  RepeatDirection="Horizontal" RepeatLayout="Flow" >   
     <asp:ListItem selected="true" Value="0">No</asp:ListItem>  
     <asp:ListItem Value="1">Yes</asp:ListItem> 
</asp:RadioButtonList>

<div id="xyz"> something.. </div>

我尝试了几种方法，但它不起作用，因为我是jQuery的新手，如果有人能给我一个上述代码的工作示例，我将不胜感激。

当用户在RadioButtonList中选择YES选项

时，默认情况下应隐藏div加载并显示DIV

Answer 1

因为我想在我的问题中使用精确的HTML节目解决方案。所以我发现了一个解决方案

<script language="javascript" type="text/javascript">
   $(document).ready(function () {
     $('#RadioDiv input').click(function () {
     $("#info").text('Selected Value: ' + $("#RadioDiv input:radio:checked").val());
         if ($("#RadioDiv input:radio:checked").val() == 0) {
              document.getElementById('Restaurent').style.display = "none";
              }
              else {
              document.getElementById('Restaurent').style.display = "";
                    }
       });
     }); 
</script>

以下HTML代码

<div id="RadioDiv">
<asp:RadioButtonList ID="ckbRestaurent" runat="server"  RepeatDirection="Horizontal" RepeatLayout="Flow" >   
  <asp:ListItem selected="true" Value="0">No</asp:ListItem>  
  <asp:ListItem Value="1">Yes</asp:ListItem> 
</asp:RadioButtonList>
</div>
<table class="style1">
      <tr>
         <td ></td><td></td>
      </tr>
      <tr><td ></td><td></td>
       </tr>
</table>
    </br>
<div id="Restaurent" style="display:none" >
<!-- Details Group Restaurent Table -->
<table cellpadding="0" cellspacing="0" class="tableDetailsGroupOne">
  <tr>
      <td class="tableDetailsGroupOneLabel">Restaurant One:</td>
      <td>
      <asp:TextBox ID="txtRestaurentOne" runat="server" CssClass="txtNameOfHotel">Restaurent One</asp:TextBox>
      </td>
</tr>
<tr>
      <td class="tableDetailsGroupOneLabel">Restaurent Two:</td>
      <td>
<asp:TextBox ID="txtRestaurentTwo" runat="server" CssClass="txtNameOfHotel" ></asp:TextBox>
      </td>
</tr>
</table>
</div>
<!-- Details Group Restaurent Table END-->

我也很感谢其他用户也回复了我的问题，因为我想要使用ASP.NET服务器控件的解决方案。

Answer 2

您需要将客户端javascript调用挂钩到RadioButtonList。在javascript函数中你可以做类似$（“＃xyz”）。hide（）或$（“＃xyz”）。show（）

Answer 3

试试这段代码

$(document).ready(function(){ 
        $("#xyz").hide();
        $("input[type=checkbox]").click(function (){
            if ($(this).attr('checked')){
                $("#xyz").show();
            }
            else {
                $("#xyz").hide();
            }
        });

    });

并添加你的html代码，以便我们可以修改上面的脚本

Answer 4

我正在添加你提到的html版本。试着理解并让我知道。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $("#xyz").hide();
        $("input[type=checkbox]").click(function (){            
            if ($(this).val()=='0' && $(this).attr('checked')){
                $("#xyz").show();
            }
            else {
                $("#xyz").hide();
            }
        });

    });
</script>
</head>
<body>
<input type="checkbox" value="0">yes
<input type="checkbox" value="1">no
<div id="xyz"> something.. </div> 
</body>
</html>

根据RadioButtonList选择的值隐藏/显示Div标签

4 个答案: