我想用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();
}
}
})
});
答案 0 :(得分:2)
这里不需要jQuery,重新格式化HTML和一小部分CSS。
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;
修改强> 如果您可以将字段集嵌套在同一个父级中(看起来像你可以)
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;
编辑:如果你真的必须保持相同的HTML,那么将需要jQuery。注意:我仍然必须提供您的单选按钮名称,以使它们互斥。
$(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;
答案 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();
}
}
})
});