Javascript 如果选中一个复选框，则取消选中另一个复选框并显示/隐藏HTML代码

我在这里尝试做两件事

如果选中“是”复选框，我想显示/隐藏一段HTML

我只希望选中“是”或“否”复选框，而不是同时选中这两个复选框

以下是脚本：

<script>
    $(document).ready(function () {
        $('.test1').change(function() {
            if ($(this).is(':checked')){
                $('#extNumber').show();
            } else {
                $('#extNumber').hide();
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.test1'）.change（函数（）{
如果（$（this）.is（':checked'））{
$（'#extNumber'）.show（）；
}否则{
$（'#extNumber'）.hide（）；
}
});
});

以下是HTML：

<td>
    Yes<input id="yPhone" type="checkbox" class="test1">
    No<input id="nPhone" type="checkbox" class="test1">
</td>   

对
不

我有一个问题——为什么我不能将yPhone和nPhone作为变量传递到函数中？然后检查复选框的状态是true还是false？我在想这样的事情（不起作用）：

在本例中，我为#yPhone和#nPhone（.test1）分配了一个类。然后我只是观察类的变化，任何时候都有变化，我将x和y指定为checked/unchecked的真/假。然而，这是行不通的。想法

<script>
    $(document).ready(function(){
        $('.test1').change(function(){
                var x = document.getElementyById('#yPhone').prop("checked");
                var y = document.getElementyById('#nPhone').prop("checked");
                if((x == false) && (y == false)){
                    $('#extNumber').hide();
                } else if (x == true){
                    $('#extNumber').show();
                }
        })
    });
</script>

$（文档）.ready（函数（）{
$（'.test1'）.change（函数（）{
var x=document.getElementyById（'#yPhone'）.prop（“选中”）；
var y=document.getElementyById（'nPhone'）.prop（“选中”）；
如果（（x==false）和&（y==false））{
$（'#extNumber'）.hide（）；
}else如果（x==true）{
$（'#extNumber'）.show（）；
}
})
});

不要不必要地混合使用javascript和jquery

使用

而不是

var x = document.getElementyById('#yPhone').prop("checked");
                           ^ Unnecessary y   ^ javascript doesn't have a prop()

编辑：1

如果您希望始终只选中一个复选框，请使用此复选框

编辑：2

选中“仅是”复选框时显示特定div

$('.test1').change(function () {
    $('.test1').not(this).prop('checked', false);
    if($('#yPhone').prop('checked')) {
        $('#extNumber').show();
    } else {
        $('#extNumber').hide();
    }
});

---

您可以使用vanilla来查找值，问题是您试图在html vanilla元素中调用jQuery属性。。。试试这个

<script>
    $(document).ready(function () {
        $('.test1').change(function() {

            if (this.checked){
                $('#extNumber').show();
            } else {
                $('#extNumber').hide();
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.test1'）.change（函数（）{
如果（选中此项）{
$（'#extNumber'）.show（）；
}否则{
$（'#extNumber'）.hide（）；
}
});
});

你可以用同样的名字换成收音机

<td>
    Yes<input id="yPhone" name="phone" type="radio" class="test1">
    No<input id="nPhone" name="phone" type="radio" >
</td>  

对
不

如果这是一个简单的是/否问题，那么您可以只使用一个复选框，因为它只需要选项=选中/取消选中、真/假、是/否

让用户选择是/否回答，然后问你的问题，如： 你同意吗？[]

然后你可以这样做

$('#agree').on('change',function() {
    if(this.checked) {
        $('#hiddenFields').css('display','block');
    } else {
        $('#hiddenFields').css('display','none');
    }
});

---

单选按钮不是这里使用的合适元素吗？而不是复选框？嗯……如果您只想选择一个或另一个而不是两个，为什么要选择复选框而不是单选按钮？另外，既然您使用的是jQuery，就不要使用

var x=document.getElementyById（'#yPhone'）.prop（“选中”），而使用
var x=$（'#yPhone'）.prop（“选中”）@j08691香草没有问题。他还可以执行var
x=document.getElementyById（'yPhone'）。选中
@RUJordan-true它会起作用，但是使用jQuery没有意义。另外，语法是错误的（不必要的
#
，普通的JS没有prop方法）？（this.checked）不是在看.test1吗？这是两个复选框，而不是一个？需要更改是和否，只删除
No
中的，HTML在我的回答中的脚本之后。这起作用了@奎师那，这并不能解决一次只检查一个复选框的问题。单选按钮也不能解决这个问题。谢谢@奎师那最后一个问题：当“否”框被选中时，我如何才能使隐藏（）触发？现在，当选中“是”时，它将显示（），但如果选中“否”，它不会隐藏（）。取消选中“是”将隐藏（）。
<td>
    Yes<input id="yPhone" name="phone" type="radio" class="test1">
    No<input id="nPhone" name="phone" type="radio" >
</td>  

$('#agree').on('change',function() {
    if(this.checked) {
        $('#hiddenFields').css('display','block');
    } else {
        $('#hiddenFields').css('display','none');
    }
});