2

我想显示和隐藏 html 表单的可见性。I have 2 modes when mode 1 is selected then the form should show up with the text box and when mode 2 is selected the form with radio buttons should show up and mode 1 should be hidden and initially everything is hidden. 这是我到目前为止所做的，但我的 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");

    }


    });

    });

任何想法建议将不胜感激。

4

5 回答 5

2

你不需要申请class="hidden"这么多元素。这是一个工作代码的小提琴。

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();
        }
    });
});
于 2013-03-24T06:56:38.517 回答
1

你应该试试这个

http://jsfiddle.net/pramodsankar007/u9RZy/

<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>
</form>
</fieldset>
</form>





$("input:radio[class=modeClass]").click(function () {
      var value = $(this).val();
      if (value == "Text box") {
          $("#radio_form").show();
          $("#text_form").hide();
          /* console.log("Time to call input box");*/
      }
      if (value == "Radio buttons") {
         $("#radio_form").hide();
          $("#text_form").show();

      }
  });
于 2013-03-24T07:00:55.597 回答
1

你的 jquery 看起来还不错，但你需要一点额外的：

$(document).ready(function(){
    $("input:radio[class=modeClass]").click(function() {
       var value = $(this).val();
       if(value=="Text box"){
           $("#text_form").show().siblings("#radio_form").hide();
       }

       if(value=="Radio buttons"){
           $("#radio_form").show().siblings("#text_form").hide();
       }
    });
});

在这里提琴

于 2013-03-24T07:06:40.663 回答
0

Jquery 有 hide 和 show 方法。

$("#text_form).hide();

还有一个切换，如果您不知道当前是否显示，这会有所帮助。

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

于 2013-03-24T06:52:52.437 回答
0

我不是.show()/.hide()因为它会导致其他不一致。我创建了一个带有稍微改进的代码版本的实时 JSFiddle。就像 Dream Eater 所做的那样，我将您的所有class='hidden'语句合并到父div元素中，使其更清洁且更易于使用。此外，您不需要该.css('display', 'block')方法，因此已将其删除。除此之外，代码很好，这就是你要找的：

链接--> http://jsfiddle.net/CFP9N/

于 2013-03-24T07:00:32.960 回答