如何隐藏单选按钮直到发生某些事情?
Posted
技术标签:
【中文标题】如何隐藏单选按钮直到发生某些事情?【英文标题】:How to hide radio button until something happens? 【发布时间】:2016-02-06 21:35:51 【问题描述】:所以我想隐藏一个单选按钮,直到我的表单被填写,但我不知道怎么做。我试过 .hide();当我把它放在我的 .submit 函数之外但在它里面不起作用时,这很有效。这是使用 jquery 和 bootstrap。
这是我拥有的 JS 的一个小版本(“同意”是单选按钮):
$('myForm').submit(function(e)
var firstName = $('first-name').val();
var pattern = /^$/;
var error = '';
var checkbox = document.getElementById('agree');
if(pattern.test(firstName))
error += 'Error: enter first name.\n';
if(error.length != 0)
alert(error);
e.preventDefault();
);
我想隐藏单选按钮,直到填写表单的名字部分,然后单选按钮才会出现。
【问题讨论】:
将单选按钮的 CSS 设置为display:none
。然后在表单字段的输入上使用 jQuery 的绑定。当他们开始输入时,将单选按钮的 css 设置为 display:block;
请参阅以下链接以查看我在这方面所做的其他示例:***.com/questions/33551833/… 和 ***.com/questions/33544127/…
这看起来像是你可以很容易地使用 angular 的东西。
谢谢,但实际上我不想为此使用 css。我想我应该提到我正在使用 jquery 和 bootstrap。
CSS 是隐藏对象的简单方法,可以使用display:none
或visibility:hidden
。我相信 jQuery 对此有一个函数 hide()...
啊@Guy 知道了,我会修改我的答案。
【参考方案1】:
像这样在你的收音机中输入一个 id:
<input type="radio" id="rad" />
然后使用 jquery 像这样隐藏它:
$('#rad').hide();
然后,如何在发生某些事情时显示它的示例如下所示:
If ($('#something') > 10)
$('#rad').show();
希望这有帮助:)
【讨论】:
【参考方案2】:我会为此使用纯 javascript:
<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>
编辑: 其他方法是使用 onkeydown、onkeyup 或 onblur 代替 onchange
【讨论】:
【参考方案3】:这是一个使用 jquery 的简单示例...http://jsfiddle.net/wa8rxj43/2/
<input type="text" id="name" class="name">
<input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>
JavaScript
$('#somecheck').hide();
$("#name").bind(
'input':function()
if(this.value.length > 0)
$('#somecheck').show();
else
$('#somecheck').hide();
);
编辑:根据 OP 的要求删除了 CSS。
【讨论】:
以上是关于如何隐藏单选按钮直到发生某些事情?的主要内容,如果未能解决你的问题,请参考以下文章