Question

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

请帮助!! ..

Answer 1

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

        });


    });

Answer 2

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

您需要检查页面加载时的无线电，选中或取消选中。

Answer 3

在没有if条件

的情况下尝试此操作

$(document).ready(function () {

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

 });

Answer 4

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

});

试试这个

Div Hides On按钮单击

4 个答案: