Javascript 使单选按钮开关div可见？

我有三个单选按钮

• 单击单选按钮1应显示

  p_div1

  并隐藏

  p_div2

  和

  p_div3

• 单击单选按钮2应显示

  p_div2

  并隐藏

  p_div1

  和

  p_div3

• 单击单选按钮3应显示

  p_div3

  并隐藏

  p_div1

  和

  p_div2

<
我是第一组

我是二组

我是第三组

@节脚本{
调试器；
$（“#Radio1”）。已选中（函数（）{
$（“#p#div1”）.show（）；
$（“#p#div2”）.hide（）；
$（“#p#div3”）.hide（）；
});
$（“#Radio2”）。已选中（函数（）{
$（“#p#div1”）.hide（）；
$（“#p#div2”）.show（）；
$（“#p#div3”）.hide（）；
});
$（“#Radio3”）。已选中（函数（）{
$（“#p#div1”）.hide（）；
$（“#p#div2”）.hide（）；
$（“#p#div3”）.show（）；
});

您需要捕获不同的事件。请像这样尝试javascript：

$("#Radio1").change (function () {
        $("#p_div1").show();
        $("#p_div2").hide();
        $("#p_div3").hide();
    });
$("#Radio2").change (function () {
        $("#p_div1").hide();
        $("#p_div2").show();
        $("#p_div3").hide();
    });
$("#Radio3").change (function () {
        $("#p_div1").hide();
        $("#p_div2").hide();
        $("#p_div3").show();
    });

<div>
    <input id="Radio1" type="radio" name="group1" data-show-div="p_div1" />
    <input id="Radio2" type="radio" name="group1" data-show-div="p_div2" />
    <input id="Radio3" type="radio" name="group1" data-show-div="p_div3" />
</div>
<div class="controlled-by-group1" id="p_div1">
    <p>This is div 1</p>
</div>
<div class="controlled-by-group1" id="p_div2">
    <p>This is div 2</p>
</div>
<div class="controlled-by-group1" id="p_div3">
    <p>This is div 3</p>
</div>

---

将

值

属性添加到单选按钮。此处的事件是

更改

，还将类添加到div以便于访问

$（“输入[name='group1']”）。在（'change'，function（）上{
var show=$（this.val（）；
$（“.p_div”）.hide（）；
$（“#p#div”+show）.show（）；
})

我是第一组

我是二组

我是第三组

像这样尝试javascript：

$('input[type="radio"]').click(function () {
            if ($(this).attr("value") == "p_div1") {
                $("#p_div2").hide();
                $("#p_div3").hide();
                $("#p_div1").show();
            }
            else if ($(this).attr("value") == "p_div2") {
                $("#p_div1").hide();
                $("#p_div3").hide();
                $("#p_div2").show();

            }
            else {
                $("#p_div1").hide();
                $("#p_div2").hide();
                $("#p_div3").show();

            }

        });

---

穆罕默德·阿提夫（Muhammad Atif）和德查尔（dchar）提供了良好且功能全面的答案。但是，我想推荐一种更通用的方法，它可以处理任何数字、div和单选按钮。这可以使用自定义的

data-*

属性来完成

首先，您需要这样的HTML：

$("#Radio1").change (function () {
        $("#p_div1").show();
        $("#p_div2").hide();
        $("#p_div3").hide();
    });
$("#Radio2").change (function () {
        $("#p_div1").hide();
        $("#p_div2").show();
        $("#p_div3").hide();
    });
$("#Radio3").change (function () {
        $("#p_div1").hide();
        $("#p_div2").hide();
        $("#p_div3").show();
    });

<div>
    <input id="Radio1" type="radio" name="group1" data-show-div="p_div1" />
    <input id="Radio2" type="radio" name="group1" data-show-div="p_div2" />
    <input id="Radio3" type="radio" name="group1" data-show-div="p_div3" />
</div>
<div class="controlled-by-group1" id="p_div1">
    <p>This is div 1</p>
</div>
<div class="controlled-by-group1" id="p_div2">
    <p>This is div 2</p>
</div>
<div class="controlled-by-group1" id="p_div3">
    <p>This is div 3</p>
</div>

---

正如您所见，代码变得更短，但也更灵活。如果您想添加第四个div，则无需更改脚本。此脚本也可以轻松修改，以便在同一页面上使用多个组或单选按钮和div。

那么您的问题是什么，您遇到了什么问题？您现在能理解吗？我理解为我一看到它（没有名为

.checked（）

的jquery函数，但您必须在问题中解释：）您可能需要查看“检查我的答案是否有效”我创建了一个fiddle:。您的代码与此不同吗？事件侦听器中的代码从未执行过？嘿，我想添加任何脚本文件吗？为此，请尝试捕获单选组的事件，而不是每个按钮，以查看是否有效。更新的fiddle位于此处：$（窗口）。on（'load'，function（）{}；这是我错过的

// When one of the group1 radio buttons are changed...
$("input[name=group1]").change(function() {
    // Hide all divs that are controlled by group1.
    $(".controlled-by-group1").hide();
    // Get the ID of the div to show.
    var id = $(this).attr("data-show-div");
    // Show that div.
    $("#" + id).show();
});