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

时间:2015-11-05 21:16:09

标签: javascript jquery html5 forms radio-button

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

});

我想要隐藏单选按钮,直到填写表单的第一个名称部分,然后单选按钮才会出现。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

在你的收音机里放一个id:

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

然后使用jquery隐藏它:

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

然后一个例子说明如何在事情发生时显示它会有点像这样:

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

希望这有助于:)

答案 2 :(得分:0)

以下是使用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。