JQUERY show隐藏FIELDSET取决于RADIO BUTTON

时间：2016-12-21 16:24:58

标签： jquery radio-button hide show fieldset

我想用JQUERY以这种方式显示和隐藏表单中的一些字段集：

PSEUDOCODE：

- if user-type == Company: show("company-fieldset")

- if user-type == Individual:
         - if individual-type == Freelancer: show("freelancer-fieldset")
         - if individual-type == Professor: show("professor-fieldset")
         - if individual-type == Student: show("student-fieldset")

我是使用JQUERY的新手，但我需要一种快速的方法来完成这件事，如果你能帮助我，我将非常感激。请考虑到：  我必须使用单选按钮，因为它们是互斥的。  每次我选择一个单选按钮时，表单必须实时更新。 感谢

HTML 

<form method="POST">

  <fieldset class="main-fieldset">
    <input type="radio" id="user-type" value="company" checked>Company<br>
    <input type="radio" id="user-type" value="individual">Individual<br>
  </fieldset>

  <fieldset class="company-fieldset">
    <p>Company showed!</p>
  </fieldset>

  <fieldset class="individual-fieldset">
    <p>Individual showed!</p>
    <input type="radio" id="individual-type" value="freelancer" checked>Freelancer<br>
    <input type="radio" id="individual-type" value="professor">Professor<br>
    <input type="radio" id="individual-type" value="student" >Student<br>
  </fieldset>

  <fieldset class="freelancer-fieldset">
    <p>Freelancer showed!</p>
  </fieldset>

  <fieldset class="professor-fieldset">
    <p>Professor showed!</p>
  </fieldset>

  <fieldset class="student-fieldset">
    <p>Student showed!</p>
  </fieldset>

  <fieldset class="main-fieldset">
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button>
  </fieldset>

 </form>

JS 

$(document).ready(function() {

    $('#user-type').change(function() {

        var user_type = $(this).attr("value");

        if (user_type === "Company") {
            $('.company-fieldset').show();
            $('.freelancer-fieldset').hide();
            $('.professor-fieldset').hide();
            $('.student-fieldset').hide();
        }

        if (user_type === "Individual") {
            $('.company-fieldset').hide();
            if (user_type === "Freelancer") {
                $('.freelancer-fieldset').show();
                $('.professor-fieldset').hide();
                $('.student-fieldset').hide();
            }
            if (user_type === "Professor") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').show();
                $('.student-fieldset').hide();
            }
            if (user_type === "Student") {
                $('.freelancer-fieldset').dide();
                $('.professor-fieldset').hide();
                $('.student-fieldset').show();
            }
        }
    })
});

2 个答案:

答案 0 :(得分：2)

这里不需要jQuery，重新格式化HTML和一小部分CSS。

  • 我在您的收音机中添加了一个名称，以便按类型
    • 分组
  • 我将字段集放在控制它们的无线电之后。

＆＃13;
＆＃13; 
fieldset:not(.main-fieldset) {
  display: none;
}
input[type=radio]:checked + br + fieldset {
  display: block;
}
＆＃13; 
<form method="POST">

  <fieldset class="main-fieldset">
    <input type="radio" id="user-type" name='user-type' value="company" checked>Company
    <br>
    <fieldset class="company-fieldset">
      <p>Company showed!</p>
    </fieldset>
    <input type="radio" id="user-type" name='user-type' value="individual">Individual
    <br>
    <fieldset class="individual-fieldset">
      <p>Individual showed!</p>
      <input type="radio" id="individual-type" name="individual-type" value="freelancer" checked>Freelancer
      <br>
      <fieldset class="freelancer-fieldset">
        <p>Freelancer showed!</p>
      </fieldset>
      <input type="radio" id="individual-type" name="individual-type" value="professor">Professor
      <br>
      <fieldset class="professor-fieldset">
        <p>Professor showed!</p>
      </fieldset>
      <input type="radio" id="individual-type" name="individual-type" value="student">Student
      <br>
      <fieldset class="student-fieldset">
        <p>Student showed!</p>
      </fieldset>
    </fieldset>
  </fieldset>
  <fieldset class="main-fieldset">
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button>
  </fieldset>

</form>
＆＃13;
＆＃13;
＆＃13;

修改 如果您可以将字段集嵌套在同一个父级中（看起来像你可以）

＆＃13;
＆＃13; 
fieldset:not(.main-fieldset) {
  display: none;
}
input[value=company]:checked ~ fieldset[class^=company] {
  display: block;
}
input[value=individual]:checked ~ fieldset[class^=individual] {
  display: block;
}
input[value=freelancer]:checked ~ fieldset[class^=freelancer] {
  display: block;
}
input[value=professor]:checked ~ fieldset[class^=professor] {
  display: block;
}
input[value=student]:checked ~ fieldset[class^=student] {
  display: block;
}
＆＃13; 
<form method="POST">

  <fieldset class="main-fieldset">
    <input type="radio" name="user-type" value="company" checked>Company
    <br>
    <input type="radio" name="user-type" value="individual">Individual
    <br>
    <fieldset class="company-fieldset">
      <p>Company showed!</p>
    </fieldset>

    <fieldset class="individual-fieldset">
      <p>Individual showed!</p>
      <input type="radio" name="individual-type" value="freelancer" checked>Freelancer
      <br>
      <input type="radio" name="individual-type" value="professor">Professor
      <br>
      <input type="radio" name="individual-type" value="student">Student
      <br>
      <fieldset class="freelancer-fieldset">
        <p>Freelancer showed!</p>
      </fieldset>

      <fieldset class="professor-fieldset">
        <p>Professor showed!</p>
      </fieldset>

      <fieldset class="student-fieldset">
        <p>Student showed!</p>
      </fieldset>
    </fieldset>
  </fieldset>
  <fieldset class="main-fieldset">
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button>
  </fieldset>

</form>
＆＃13;
＆＃13;
＆＃13;

编辑：如果你真的必须保持相同的HTML，那么将需要jQuery。注意：我仍然必须提供您的单选按钮名称，以使它们互斥。

＆＃13;
＆＃13; 
$(function(){
  $("input[type=radio]").change(function(){
    if($(this).is(":checked")){
      $("fieldset:not(.main-fieldset)").hide();//hide everything
      $(this).parent().show();//show this ones container
      $("fieldset[class^='" + $(this).val() + "']").show(); //show the matching fieldset
      $("fieldset[class^='" + $(this).val() + "']>input:checked").change();//show children as required.
    }
  });
  $("input[value=company]").change();
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST">

  <fieldset class="main-fieldset">
    <input type="radio" name="user-type" value="company" checked>Company<br>
    <input type="radio" name="user-type" value="individual">Individual<br>
  </fieldset>

  <fieldset class="company-fieldset">
    <p>Company showed!</p>
  </fieldset>

  <fieldset class="individual-fieldset">
    <p>Individual showed!</p>
    <input type="radio" name="individual-type" value="freelancer" checked>Freelancer<br>
    <input type="radio" name="individual-type" value="professor">Professor<br>
    <input type="radio" name="individual-type" value="student" >Student<br>
  </fieldset>

  <fieldset class="freelancer-fieldset">
    <p>Freelancer showed!</p>
  </fieldset>

  <fieldset class="professor-fieldset">
    <p>Professor showed!</p>
  </fieldset>

  <fieldset class="student-fieldset">
    <p>Student showed!</p>
  </fieldset>

  <fieldset class="main-fieldset">
    <button type="button" onclick="alert('Hello World!')">SUBMIT</button>
  </fieldset>

 </form>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

实际上我的HTML看起来像这样：

<form method="POST">

        <fieldset class="main-fieldset">
            {{ form.email.label }} {{ form.email() }}
            {{ form.password.label }} {{ form.password() }}
            {{ form.phone.label }} {{ form.phone() }}
            {{ form.location.label }} {{ form.location() }}
            {{ form.user_type.label }} {{ form.user_type(id='user-type') }}
        </fieldset>

        <fieldset class="company-fieldset">
            {{ form.company_name.label }} {{ form.company_name() }}
        </fieldset>

        <fieldset class="individual-fieldset">
            {{ form.name.label }} {{ form.name() }}
            {{ form.surname.label }} {{ form.surname() }}
            {{ form.birth.label }} {{ form.birth() }}
            {{ form.skills.label }} {{ form.skills() }}
            {{ form.individual_type.label }} {{ form.individual_type(id='individual-type') }}

            <fieldset class="freelancer-fieldset">
                {{ form.studio.label }} {{ form.studio() }}
            </fieldset>

            <fieldset class="professor-fieldset">
                {{ form.department.label }} {{ form.department() }}
            </fieldset>

            <fieldset class="student-fieldset">
                {{ form.school.label }} {{ form.school() }}
            </fieldset>
        </fieldset>

        <fieldset class="main-fieldset">
            {{ form.submit() }}
        </fieldset>
</form>

我的JS看起来像这样：

$(document).ready(function() {

    $("#user_type, #individual_type").change(function() {

        var user_type = $('#user_type').attr("value");

        if (user_type == "company") {
            $('.company-fieldset').show();
            $('.individual-fieldset').hide();
        }

        if (user_type == "individual") {

            $('.company-fieldset').hide();

            var individual_type = $('#individual_type').attr("value");

            if (individual_type == "freelancer") {
                $('.freelancer-fieldset').show();
                $('.professor-fieldset').hide();
                $('.student-fieldset').hide();
            }
            if (individual_type == "professor") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').show();
                $('.student-fieldset').hide();
            }
            if (individual_type == "student") {
                $('.freelancer-fieldset').hide();
                $('.professor-fieldset').hide();
                $('.student-fieldset').show();
            }
        }
    })
});
相关问题
最新问题