潜水隐藏打开按钮点击

我的网页上有三个单选按钮和三个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>

请帮帮我！！。。

这是您的完整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>

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

$(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();
            }
        });

    });

在没有if条件的情况下尝试此操作

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

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

试试这个

相关内容

最新更新

热门标签：