要素をページのユーザー入力に反応させる方法

最初の質問に対して「はい」オプションを選択すると、2番目の質問が表示されなくなります。 Laravelフレームワークとマテリアルデザインライトとこの使用しているPHP7要素をページのユーザー入力に反応させる方法

 <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="USDyes"> 
      <input type="radio" id="USDyes" class="mdl-radio__button" name="options" value="1"> 
      <span class="mdl-radio__label">Yes</span> 
     </label> 
     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="USDno"> 
      <input type="radio" id="USDno" class="mdl-radio__button" name="options" value="2"> 
      <span class="mdl-radio__label">No</span> 
     </label> 


     <h6>How Long Will the Data Be Retained?</h6> 
     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret1"> 
      <input type="radio" id="Ret1" class="mdl-radio__button" name="options" value="1"> 
      <span class="mdl-radio__label">>1 Year</span> 
     </label> 
     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret2"> 
      <input type="radio" id="Ret2" class="mdl-radio__button" name="options" value="2"> 
      <span class="mdl-radio__label">1-3 Years</span> 
     </label> 
     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret3"> 
      <input type="radio" id="Ret3" class="mdl-radio__button" name="options" value="3"> 
      <span class="mdl-radio__label">3-5 Years</span> 
     </label> 
     <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret4"> 
      <input type="radio" id="Ret4" class="mdl-radio__button" name="options" value="4" > 
      <span class="mdl-radio__label">5+ Years</span> 
     </label>

出典

2017-06-13 epictaco24

DOM内の両方の要素をロードする必要があるので、JavaScriptを使用する必要があります – idelara

どうすればよいですか？申し訳ありませんが、これまでにC++とJavaを使用したことがあります – epictaco24

JavaとJavaScriptは2つの非常に異なるものです。あなたがウェブ開発を初めて知りたければ、http://www.htmlgoodies.com/beyond/javascript/article.php/3470971 – idelara

index.html：

<html> 
<head> 
</head> 
<body> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="USDyes"> 
    <input type="radio" id="USDyes" class="mdl-radio__button" name="options" value="1"> 
    <span class="mdl-radio__label">Yes</span> 
    </label> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="USDno"> 
    <input type="radio" id="USDno" class="mdl-radio__button" name="options" value="2"> 
    <span class="mdl-radio__label">No</span> 
    </label> 

    <div class="data-question"> 
    <h6>How Long Will the Data Be Retained?</h6> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret1"> 
    <input type="radio" id="Ret1" class="mdl-radio__button" name="options" value="1"> 
    <span class="mdl-radio__label">>1 Year</span> 
    </label> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret2"> 
    <input type="radio" id="Ret2" class="mdl-radio__button" name="options" value="2"> 
    <span class="mdl-radio__label">1-3 Years</span> 
    </label> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret3"> 
    <input type="radio" id="Ret3" class="mdl-radio__button" name="options" value="3"> 
    <span class="mdl-radio__label">3-5 Years</span> 
    </label> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret4"> 
    <input type="radio" id="Ret4" class="mdl-radio__button" name="options" value="4" > 
    <span class="mdl-radio__label">5+ Years</span> 
    </label> 
    </div> 

</body> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 
<script> 
    $(document).ready(function(){ 
     $('input[type=radio][name=options]').change(function() { 
     if($(this).val() == 1) 
      $(".data-question").hide(); 
     else 
      $(".data-question").show(); 
    }); 
    }); 
</script> 
</html>

完全な作業例のために私のJSFiddleを参照してください：

https://jsfiddle.net/reqr3gjs/

ORコピー/上記のコードを貼り付け、ブラウザで開きます。それは動作するはずです。

出典

2017-06-13 19:50:23 idelara

JavaScriptを使用せずに（上記の例のように）CSSだけを使用して行うことができます。

<html> 
<head> 
     <style> 
      .conditional_form_part { 
      display: none; 
      } 

      .conditional_form_part_activator:checked ~ .conditional_form_part { 
      display: block; 
      } 
      </style> 
    </head> 
    <body> 
      <input type="checkbox" id="USDyes" class="conditional_form_part_activator mdl-radio__button" name="options" value="1"> 
      <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="USDyes">Yes</label> 
      <input type="checkbox" id="USDno" class="mdl-radio__button" name="options" value="2"> 
      <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="USDno">No</label> 
      <div class="conditional_form_part"> 
        <h6>How Long Will the Data Be Retained?</h6> 
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret1"> 
        <input type="radio" id="Ret1" class="mdl-radio__button" name="options" value="1"> 
        <span class="mdl-radio__label">>1 Year</span> 
        </label> 
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret2"> 
        <input type="radio" id="Ret2" class="mdl-radio__button" name="options" value="2"> 
        <span class="mdl-radio__label">1-3 Years</span> 
        </label> 
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret3"> 
        <input type="radio" id="Ret3" class="mdl-radio__button" name="options" value="3"> 
        <span class="mdl-radio__label">3-5 Years</span> 
        </label> 
        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Ret4"> 
        <input type="radio" id="Ret4" class="mdl-radio__button" name="options" value="4" > 
        <span class="mdl-radio__label">5+ Years</span> 
        </label> 
      </div> 
    </body>

1が非表示になり、他のものをチェックされている場合は、この方法で。この回答はhttps://content.pivotal.io/blog/showing-and-hiding-conditional-html-without-javascriptから取られました

出典

2017-06-13 22:02:51

あなたの例に合った答えを編集しました。このHTMLは、JSが必要でない場合と同様に動作します –

要素をページのユーザー入力に反応させる方法

答えて

関連する問題