如果选中无线电,则需要输入字段

时间:2012-08-15 10:12:51

标签: javascript html5 radio-button onchange required

只有在选中某个无线电时,我才能以某种方式将所需属性插入输入字段吗?

我有一个名为“ladder-meters”的输入字段,默认情况下不需要填充。但是,如果用户检查名为“梯形图”的单选按钮,则需要填写“梯形表”字段。

我的输入如下:

<input type="text" name="ladder-meters" id="ladder-meters">

并且应该在收音机的onchange事件中这样做

<input type="text" name="ladder-meters" id="ladder-meters" required>

3 个答案:

答案 0 :(得分:17)

尝试F. Orvalho,没有为我工作,我不得不使用

$('#ladder').change(function () {
    if(this.checked) {
        $('#ladder-meters').prop('required', true);
    } else {
        $('#ladder-meters').prop('required', false);
    }
});

它可能很有用。 Thx到F. Orvalho的结构

答案 1 :(得分:16)

document.getElementById("ladder").addEventListener('change', function(){
    document.getElementById("ladder-meters").required = this.checked ;
})

只要单击该复选框,就会更改required属性以匹配复选框的checked属性。要撤消此关系,请将this.checked替换为!this.checked

这可能需要进行一些调整以适合您的具体项目。

这将与此复选框一起使用:

<input type='checkbox' id='ladder' name='ladder' />

答案 2 :(得分:12)

使用jQuery轻松实现:

$('#ladder').change(function () {
    if($(this).is(':checked') {
        $('#ladder-meters').attr('required');
    } else {
        $('#ladder-meters').removeAttr('required');
    }
});