Javascript 如何使用单选按钮切换div可见性？

我正在做一个项目，在这个项目中，我必须切换

的可见性

我有以下代码：

<input type="radio" name="type" value="1"> Personal
<input type="radio" name="type" value="2"> Business

<div class="business-fields">
    <input type="text" name="company-name">
    <input type="text" name="vat-number">
</div>

但是，我想知道是否可以使用.toggle（）函数来执行此操作。

您可以这样使用：

$("input[name='type']").change(function() {
    var status = $(this).val();
    if (status != 2) {
        $(".business-fields").hide();
    } else {
        $(".business-fields").show();
    }
});

---

我建议使用

change

事件，并为

toggle（）

方法提供一个布尔开关，如果开关的计算结果为

true

，它将显示jQuery元素集合，如果它的计算结果为

false

，则隐藏它们：

//选择相关元素，并使用on（）绑定更改事件处理程序：
$（'input[name=“type”]”）。在（'change'，function（）上{
//在匿名函数中，这指的是已更改的-：
//选择要显示/隐藏的元素：
$（“.业务字段”）
//如果方法的数值已更改，则将布尔值传递给该方法-
//正好等于2，并且选中了.business字段
//将显示：
.toggle（+this.value==2&&this.checked）；
//触发更改事件，以显示/隐藏上的.business fields元素
//页面加载：
}).change（）

个人的
生意
使用以下代码

<script>
$(function(){
$(":radio[value=1]").click(function(){
    var isVisible = $( ".business-fields" ).is( ":visible" );
    if(isVisible==true)
        $('.business-fields').toggle();
});

$(":radio[value=2]").click(function(){
    var isVisible = $( ".business-fields" ).is( ":visible" );
    if(isVisible==false)
        $('.business-fields').toggle();
});
});
</script>


$（函数（）{
$（“：radio[value=1]”。单击（函数（）{
var isVisible=$（“.business fields”）.is（“：visible”）；
如果（isVisible==true）
$（'.business fields'）.toggle（）；
});
$（“：radio[value=2]”。单击（函数（）{
var isVisible=$（“.business fields”）.is（“：visible”）；
如果（isVisible==false）
$（'.business fields'）.toggle（）；
});
});

HTML是-

<input name="type" type="radio" value="1" >Personal
<input type="radio" name="type" value="2" checked="checked"> Business

<div class="business-fields">
    <input type="text" name="company-name">
    <input type="text" name="vat-number">
</div>

个人
生意

试试这个

<input type="radio" name="type" value="1" checked ="true"> Personal
<input type="radio" name="type" value="2"> Business

<div class="business-fields">
    <input type="text" name="company-name">
    <input type="text" name="vat-number">
</div>

.business-fields{
    display: none;
}



    $("input[name='type']").change(function() {
        $(".business-fields").toggle();
});

个人
生意
.商业领域{
显示：无；
}
$（“输入[name='type']”）。更改（函数（）{
$（“.business fields”）.toggle（）；
});
如果可能的话，我通常不会使用JS，因此这里有一种HTML+CSS的方法


.busines类型.业务字段{
显示：无；
}
.busines类型输入[value=“2”]：选中~.business字段{
显示：块；
}

个人的
生意
.show和.hide相当慢。

最好使用javascript打开和关闭css类。将类的css设置为{visibility:hidden}或{display:none}
可能是一个更优雅的解决方案，在我看来，它更具可读性，正如@Ollie_W指出的那样，切换（show/hide）可能更有效


$（'input[name=“type”]”）。在（'change'，函数（事件）上{
var radioButton=$（event.currentTarget），
isBusiness=radioButton.val（）；
$（'.business fields'）.toggleClass（'hidden'，！isBusiness）；
}).change（）
。隐藏{
显示：无；
}

个人的
生意
为什么不直接使用
.toggle（）
而不是show（）和hide（）？@WeSt只有在OP修改代码以使用
更改
事件时才会起作用。。show（）hide（）是最好的方法。toggle（）因为当你重新选择personal时，它会显示文本框。toggle不是一个好选项：首先选中personal，然后你知道结果不是OP想要的
<input type="radio" name="type" value="1" checked ="true"> Personal
<input type="radio" name="type" value="2"> Business

<div class="business-fields">
    <input type="text" name="company-name">
    <input type="text" name="vat-number">
</div>

.business-fields{
    display: none;
}



    $("input[name='type']").change(function() {
        $(".business-fields").toggle();
});