Question

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

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

Answer 2

你应该试试这个

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

      }
  });

Answer 3

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

FIDDLE HERE

Answer 4

Jquery ha s hide and show method。

$("#text_form).hide();

还有切换功能，如果您不知道当前是否显示，则会有所帮助。

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

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

Answer 5

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

链接 - ＆GT;的 http://jsfiddle.net/CFP9N/

以html格式切换隐藏和显示

5 个答案:

HTML

的jQuery

FIDDLE HERE