jquery - 以html形式切换隐藏和显示

Question

我想显示和隐藏 html 表单的可见性。我有两种模式，当选择模式 1 时，表单应显示文本框，当选择模式 2 时，应显示带有单选按钮的表单，模式 1 应隐藏，最初所有内容都隐藏。这是我到目前为止所做的，但我的 jQuery CSS 无法应用。

HTML 表单

<form>
  <fieldset>
    <legend>Lets switch</legend>
     Mode 1 
    <input type="radio" class="modeClass" name="change_mode" value="Text box">
     Mode 2  
    <input type="radio" class="modeClass" name="change_mode" value="Radio buttons"> <br>
    <div id= "text_form">
   <label class="hidden"> Name:</label> <input type="text" class ="hidden"><br>
   <label class= "hidden"> Email:</label> <input type="text" class ="hidden"><br>
    <label class= "hidden"> Date of birth:</label> <input type="text" class ="hidden">
    </div>
   <div id="radio_form">
   <input type="radio" name="sex" class ="hidden" value="male"><label  class="hidden">Male</label>
   <input type="radio" name="sex" class="hidden" value="female"><label class= "hidden">Female</label>
   </form>
  </fieldset>
</form>  

CSS

<style>
.hidden 
{

  display:none;

} 
</style>

JQuery

 $(document).ready(function(){

    /*Getting the value of the checked radio buttons*/
    $("input:radio[class=modeClass]").click(function() {
       var value = $(this).val();
     /*  console.log(value);*/
    if(value=="Text box")
    {

    $("#text_form").css("display","block");
   /* console.log("Time to call input box");*/
    }

    if(value=="Radio buttons")
    {

    $("#radio_form").css("display","block");

    }


    });

    });

任何想法建议都将受到高度赞赏。

Answer 1

您不需要将 class="hidden" 应用于如此多的元素。 Here是一个工作代码的摆弄。

HTML

<form>
    <fieldset>
        <legend>Lets switch</legend>Mode 1
        <input type="radio" class="modeClass" name="change_mode" value="Text box" />Mode 2
        <input type="radio" class="modeClass" name="change_mode" value="Radio buttons" />
        <br />
        <div id="text_form" class="hidden">
            <label>Name:</label>
            <input type="text" />
            <br />
            <label>Email:</label>
            <input type="text" />
            <br />
            <label>Date of birth:</label>
            <input type="text" />
        </div>
        <div id="radio_form" class="hidden">
            <input type="radio" name="sex" value="male" />
            <label>Male</label>
            <input type="radio" name="sex" value="female" />
            <label>Female</label>
        </div>
    </fieldset>
</form>

jQuery

$(document).ready(function () {
    /*Getting the value of the checked radio buttons*/
    $("input.modeClass").on( 'click', function () {
        var value = $(this).val();
        if (value == "Text box") {
            $("#text_form").show();
            $("#radio_form").hide();
        }
        if (value == "Radio buttons") {
            $("#text_form").hide();
            $("#radio_form").show();
        }
    });
});