Javascript 根据收音机的是或否选择显示或隐藏表单
我试图使用Jquery根据用户选择的内容或多或少地显示表单。如果用户选择“是”,则会显示更多表单。我计划用许多不同的顶级问题来解决这个问题,然后根据是或否来解锁更多的问题 在这个链接上,这显示了我所拥有的。 我遇到的问题是,用户需要检查两次“是”以使问题消失,但当用户检查“否”时,问题应该关闭 代码: JQueryJavascript 根据收音机的是或否选择显示或隐藏表单,javascript,jquery,html,Javascript,Jquery,Html,我试图使用Jquery根据用户选择的内容或多或少地显示表单。如果用户选择“是”,则会显示更多表单。我计划用许多不同的顶级问题来解决这个问题,然后根据是或否来解锁更多的问题 在这个链接上,这显示了我所拥有的。 我遇到的问题是,用户需要检查两次“是”以使问题消失,但当用户检查“否”时,问题应该关闭 代码: JQuery $(文档).ready(函数(){ $('.show_hide').showHide({ 速度:1000,//希望切换发生的速度 减少:'',//您想要的动画效果。如果您不想要效果
$(文档).ready(函数(){
$('.show_hide').showHide({
速度:1000,//希望切换发生的速度
减少:'',//您想要的动画效果。如果您不想要效果并且没有包含jQuery UI,请删除这一行
changeText:0,//如果不希望更改按钮文本,请将其设置为0
showText:'是',//关闭div时要显示的按钮文本
hideText:'否'//打开div时要显示的按钮文本
});
});
HTML格式:
<form class="form-signin" role="form">
I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes
<div id="slidingDiv">
I am having a username and password issue.
<input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
<input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
</div>
<a href="#" class="show_hide" rel="#slidingDiv_2"></a><br />
<div id="slidingDiv_2">
I need to reset my password
<input type="radio" name="password" id="password-0" value="No" checked="checked" required> No
<input type="radio" name="password" id="password-1" value="Yes" required> Yes
</br>
My username needs updated.
<input type="radio" name="username" id="username-0" value="No" checked="checked" required> No
<input type="radio" name="username" id="username-1" value="Yes" required> Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required> No
<input type="radio" name="locked" id="locked-1" value="Yes" required> Yes</br>
I am experiencing other problems
<input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
<input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
</div>
</div>
我的办公室登录有云问题
不
对
我有一个用户名和密码问题。
不
对
我需要重新设置密码
不
对
我的用户名需要更新。
不
对
我的账户被锁定了
不
对
我遇到了其他问题
不
对
CSS
身体{
字体系列:Verdana,日内瓦,无衬线;
字体大小:14px;}
#滑动div,#滑动div_2{
显示:无;
}
我的问题是。这是做这种事情的最好方法吗?
有没有办法让“无”选项关闭div?
感谢您的帮助 为第一个问题选择
yes
应始终显示下一个问题,no
应始终隐藏下一个问题。当前yes
正在显示和隐藏之间切换
与选择第二个问题的yes
或no
并显示后续问题相同
就良好的用户界面而言,以您目前的方式使用无线电输入并不合适。如果确实使用单选按钮,请将单选按钮
和属于它的文本包装在
标记中,以便单击文本选择单选按钮。这使得你的用户点击的目标更大。这同样适用于复选框
当您必须从三个或三个以上选项中选择一个时,收音机输入更有意义。两种方法都可行,但只有两种可能,通常会有更合适的输入类型。对于最后一组问题,复选框比一系列收音机更有意义。我们可以使用jquery更改事件来实现您的要求
})) 我可以看到您的项目变得相当复杂,因此我认为javascript中包含所有逻辑不是解决这个问题的正确方法。因此,我在javascript中创建了一种逻辑控制器,并将逻辑需求分离到带有一些数据属性的html中 此解决方案现在非常灵活,易于维护。您只需将需要显示和消失的部分包装在
div
中,并为它们提供一个名为的属性“数据视图条件”
。此属性可以包含多个需要满足才能显示的条件
条件以逗号分隔,并包含输入名称和所需值。依次用冒号分隔。这支持收音机和复选框输入。您还可以只提供一个没有值的名称,如果输入至少被选中或选中而不考虑值,则条件将“匹配”。下面是一些示例条件
data-view-conditions="name"
data-view-conditions="name:1"
data-view-conditions="name:1,name2:3,name3:test"
data-view-conditions="name4:123,name5"
JavaScript:
jQuery(function($){
// Prevents errors in old IE.
if(!window.console || !window.console.log) window.console = {log: function(){}};
// Enable debugging for complex logic.
var debug = true;
function checkConditions(inputs, views){
views.each(function(){
var view = $(this);
var conditions = view.attr('data-view-conditions').split(',');
var display = true;
// Loop over all required conditions to be met.
for(var i = 0; i < conditions.length; i++){
var name = conditions[i].split(':')[0];
var value = conditions[i].split(':')[1];
var input = inputs.filter('[name="' + name + '"]:checked');
if(debug) console.log('\nRecalculating view conditions.');
if(!input.length){
display = false;
if(debug) console.log('View not show as no :checked input with the name "' + name + '" was found.');
}else{
if(value != undefined && input.val() != value){
display = false;
if(debug) console.log('View not show as no :checked input with the name "' + name + '" has the value of "' + input.val() + '". Value needed was: "' + value + '".');
}
}
}
if(display){
view.css({display: 'block'});
}else{
view.css({display: 'none'});
}
});
}
$('form').each(function(){
var form = $(this);
var inputs = form.find('input[type="checkbox"], input[type="radio"]');
var views = form.find('[data-view-conditions]');
// Recalculate which views to be shown each time the inputs change.
inputs.on('change', function(e){
checkConditions(inputs, views);
});
// Check conditions to set up required view state on page load.
checkConditions(inputs, views);
});
});
jQuery(函数($){
//防止旧IE中的错误。
如果(!window.console | |!window.console.log)window.console={log:function(){};
//启用复杂逻辑的调试。
var debug=true;
功能检查条件(输入、视图){
视图。每个(函数(){
var视图=$(此);
var conditions=view.attr('data-view-conditions').split(',');
var显示=真;
//循环所有需要满足的条件。
对于(变量i=0;i
HTML:
输入1
输入2
你好
点击我
它起作用了
请使用相关代码更新您的问题。您在单击时切换div,这导致yes选项显示/隐藏包含更多问题的div。发布代码。除了在您的问题中发布任何相关代码外,它可能是h
$(document).ready(function(){
$("input:radio").change(function(){
console.log(this);
if(this.value == 'Yes' && this.name == 'myofficeissue'){
$('#slidingDiv').slideDown();
}else if(this.value == 'No' && this.name == 'myofficeissue'){
$('#slidingDiv').slideUp();
$('#slidingDiv_2').slideUp();
}else if(this.value == 'Yes' && this.name == 'passwordissue'){
$('#slidingDiv_2').slideDown();
}else if(this.value == 'No' && this.name == 'passwordissue'){
$('#slidingDiv_2').slideUp();
}
});
data-view-conditions="name"
data-view-conditions="name:1"
data-view-conditions="name:1,name2:3,name3:test"
data-view-conditions="name4:123,name5"
jQuery(function($){
// Prevents errors in old IE.
if(!window.console || !window.console.log) window.console = {log: function(){}};
// Enable debugging for complex logic.
var debug = true;
function checkConditions(inputs, views){
views.each(function(){
var view = $(this);
var conditions = view.attr('data-view-conditions').split(',');
var display = true;
// Loop over all required conditions to be met.
for(var i = 0; i < conditions.length; i++){
var name = conditions[i].split(':')[0];
var value = conditions[i].split(':')[1];
var input = inputs.filter('[name="' + name + '"]:checked');
if(debug) console.log('\nRecalculating view conditions.');
if(!input.length){
display = false;
if(debug) console.log('View not show as no :checked input with the name "' + name + '" was found.');
}else{
if(value != undefined && input.val() != value){
display = false;
if(debug) console.log('View not show as no :checked input with the name "' + name + '" has the value of "' + input.val() + '". Value needed was: "' + value + '".');
}
}
}
if(display){
view.css({display: 'block'});
}else{
view.css({display: 'none'});
}
});
}
$('form').each(function(){
var form = $(this);
var inputs = form.find('input[type="checkbox"], input[type="radio"]');
var views = form.find('[data-view-conditions]');
// Recalculate which views to be shown each time the inputs change.
inputs.on('change', function(e){
checkConditions(inputs, views);
});
// Check conditions to set up required view state on page load.
checkConditions(inputs, views);
});
});
<form>
<label for="i1">Input 1</label>
<input id="i1" type="radio" name="name1" value="1">
<label for="i2">Input 2</label>
<input id="i2" type="radio" name="name1" value="2">
<div data-view-conditions="name1:2">
<p>Hello</p>
<label for="i3">Click me</label>
<input id="i3" type="checkbox" name="name2">
<div data-view-conditions="name2">
<p>It works!</p>
</div>
</div>
</form>