2

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

    }


    });

    });

任意のアイデアの提案は高く評価されます。

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 に答える