Div 隐藏按钮单击答案

【问题标题】：Div Hides On button clickDiv 隐藏按钮单击
【发布时间】：2014-07-28 04:50:28
【问题描述】：

我的网页上有三个单选按钮和三个 div。这是代码

<body>
   <form id="form1" runat="server">
      <div>
         <table class="style1">
            <tr>
               <td>
                  <asp:RadioButton ID="RadioButton1" runat="server" GroupName="1"
                       value="gridbox" />
               </td>
               <td>
                   <asp:RadioButton ID="RadioButton2" runat="server" GroupName="1" 
                        value="graphbox" />
               </td>
               <td>
                   <asp:RadioButton ID="RadioButton3" runat="server" GroupName="1" 
                        value="individualbox" />
               </td>
            </tr>
         </table>
         <div id="gridbox" class=" gridbox box" visible="false">
           <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                Text="Div1" />
           <asp:Label ID="Label1" runat="server" Text="This is div 1" 
                Visible="False"></asp:Label>
         </div>
         <div id="graphbox" class="graphbox box" visible="false">
            <asp:Button ID="Button2" runat="server" onclick="Button2_Click" 
                 Text="Div2" />
            <asp:Label ID="Label2" runat="server" Text="This is div 2" 
                 Visible="False"></asp:Label>
         </div>
         <div id="individualbox" class="individualbox box" visible="false">
             <asp:Button ID="Button3" runat="server" onclick="Button3_Click" 
             Text="Div3" />
             <asp:Label ID="Label3" runat="server" Text="This is Div 3" 
                  Visible="False"></asp:Label>
         </div>
      </div>
   </form>
</body>

我在单选按钮选择上隐藏和取消隐藏 div 并在按钮单击时显示标签，但问题是当我单击按钮时 div 会自动隐藏并查看标签我需要再次单击单选按钮。这是我正在使用的 jquery。

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $("#gridbox").hide();
        $("#graphbox").hide();
        $("#individualbox").hide();
    });


    $(document).ready(function () {
        $('input[type="radio"]').click(function () {
            if ($(this).attr("value") == "gridbox") {
                $(".box").hide();
                $(".gridbox").show();
            }
            if ($(this).attr("value") == "graphbox") {
                $(".box").hide();
                $(".graphbox").show();
            }
            if ($(this).attr("value") == "individualbox") {
                $(".box").hide();
                $(".individualbox").show();
            }

        });

    });

</script>

请帮忙！！..

【问题讨论】：

这可能是因为 .box 是所有 3 个 div 的通用类。
不，这不是问题。我已经检查过了
给你的按钮点击事件代码
按钮 1 点击代码 => Label1.Visible = true;
这是因为，您在函数加载时隐藏了 div。一旦你点击按钮页面得到刷新，你的 div 得到隐藏。

标签： jquery asp.net

【解决方案1】：

这是你完整的 jquery

   <script type="text/javascript">
        $(document).ready(function () {
            $('.box').hide();
            $('input[type="radio"]').each(function(){               
              if($(this).is(':checked')){                
                 var val=$(this).val();
                 $('.'+val).show();
             }
            });
            $('input[type="radio"]').click(function () {
                if ($(this).attr("value") == "gridbox") {
                    $(".box").hide();
                    $(".gridbox").show();
                }
                if ($(this).attr("value") == "graphbox") {
                    $(".box").hide();
                    $(".graphbox").show();
                }
                if ($(this).attr("value") == "individualbox") {
                    $(".box").hide();
                    $(".individualbox").show();
                }

            });
            $('input[type="submit"]').click(function () {         
                $('.box').hide();
                $(this).closest('.box').show();
            });
        });

    </script>

您需要在页面加载时检查收音机，无论是选中还是未选中。

【讨论】：

它不工作，即使 div 现在也没有隐藏在选择单选按钮上：-|
@user3796112：立即查看。

【解决方案2】：

$(document).ready(function () {
        $('input[type="radio"]').click(function () {
            if ($(this).attr("value") == "gridbox") {
                $(".box").hide();
                $("#gridbox").show();
            }
            if ($(this).attr("value") == "graphbox") {
                $(".box").hide();
                $("#graphbox").show();
            }
            if ($(this).attr("value") == "individualbox") {
                $(".box").hide();
                $("#individualbox").show();
            }

        });


    });

【讨论】：

【解决方案3】：

试试这个没有if条件

$(document).ready(function () {

        $('input[type="radio"]').click(function () {
                $(".box").hide();
                $("#" +  $(this).attr("value")).show();
        });

 });

【讨论】：

你不能使用 # 表示 class 。这一行应该是这样 $("." + $(this).attr("value")).show();
@AmitKumar - 这不是一个类。它的 id 看起来 OP Html 代码
还有课。所以你的代码是正确的。这是我的错。
按钮点击后不会隐藏其他 div

【解决方案4】：

  $(document).ready(function () {
    $(".box").hide();
    $('input[type="radio"]').click(function () {
            var thisindex = $(this).index();
            $(".box").hide();
            $(".box").eq(thisindex).show();
    });

});

试试这个

【讨论】：