如何隐藏单选按钮直到出现问题

How to hide radio button until something happens?

本文关键字：问题 单选按钮 何隐藏 隐藏      更新时间：2023-09-26

所以我想隐藏一个单选按钮，直到我的表单填写完毕，但我不知道怎么做。我试过.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();
    }
});

我想隐藏单选按钮，直到填写完表单的名字部分，然后单选按钮就会出现。

在你的收音机里放一个id，如下所示：

<input type="radio" id="rad" />

然后使用jquery:像这样隐藏它

$('#rad').hide();

然后，当发生什么事情时，如何让它显示出来的例子有点像这样：

If ($('#something') > 10) {
    $('#rad').show();
}

希望这有帮助：）

我会使用纯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

下面是一个使用jquery的简单示例。。。http://jsfiddle.net/wa8rxj43/2/

HTML

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

相关文章：