Question

如果您为第一个问题选择“是”选项，则第二个问题不可见，请尝试这样做。这是将PHP7与Laravel Framework和Material Design Lite一起使用

        <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>

Answer 1

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/

复制/粘贴上面的代码并在浏览器中打开。它应该工作。

Answer 2

你可以使用CSS而不必使用javascript（对于你上面的例子）。

<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>

这样一旦被检查，另一个将被隐藏。这个答案取自https://content.pivotal.io/blog/showing-and-hiding-conditional-html-without-javascript

如何使元素对页面上的用户输入做出反应

2 个答案: