jquery 尝试在单击单选按钮时隐藏/显示div

c90pui9n 于 2022-11-29 发布在 jQuery

关注(0)|答案(3)|浏览(228)

我试图根据人们单击的单选按钮来隐藏和显示不同的div。

Jquery加载正常，我试过在页面加载时发出警告。
非常相似的代码、选择器方法等在同一服务器上同一目录中具有相同包含的页面上工作

输入框代码为：

<label class="radio"><input type="radio" name="input_sandwich_choice" value="Panini">Panini</label>
            <label class="radio"><input type="radio" name="input_sandwich_choice" value="Sandwich">Sandwich</label>
            <label class="radio"><input type="radio" name="input_sandwich_choice" value="Baguette">Baguette</label>

这些div包括：

<div id="div_bread_options" class="collapse span3"> <!--2.2-->
            <h4>Which bread would you like?</h4>
            <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">White</label>
            <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">Brown</label>
            <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">Granary</label>
            <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label>
        </div> <!--2.2-->

        <div id="div_butter_options" class="collapse span3"> <!--2.3-->
            <h4>Would you like butter?</h4>
            <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="Yes">Yes</label>
            <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="No">No</label>
            <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label>
        </div> <!--2.3-->

最后，Jquery是：

<script>

    $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
        alert("Oops.");
    }
});
    </script>

只是不知道为什么不工作...任何帮助都非常感谢！谢谢

jquery

来源：https://stackoverflow.com/questions/17709249/trying-to-hide-show-divs-on-radio-button-clicks

3条答案

按热度按时间

carvr3hs1#

如果你的头中有这样的内容
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
您可以在以下任何位置使用此命令：

$(document).ready(function() {
      $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
         console.log("Oops.");
    }
});
    });

我还建议您使用console.log而不是alert，这样您的脚本就不会在每次发出警报时都停止。
所以期末考试应该是这样的

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Panini">Panini</label>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Sandwich">Sandwich</label>
<label class="radio"><input type="radio" name="input_sandwich_choice" value="Baguette">Baguette</label>

<div id="div_bread_options" class="collapse span3"> <!--2.2-->
            <h4>Which bread would you like?</h4>
            <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">White</label>
            <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">Brown</label>
            <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">Granary</label>
            <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label>
        </div> <!--2.2-->

        <div id="div_butter_options" class="collapse span3"> <!--2.3-->
            <h4>Would you like butter?</h4>
            <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="Yes">Yes</label>
            <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="No">No</label>
            <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label>
        </div> <!--2.3-->
</div>

<script type="text/javascript">
 $(document).ready(function() {
      $("input[name=input_sandwich_choice]").click(function() {
    var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
    console.log(checkedValue);
    if (checkedValue == "Panini") {
        $("#div_bread_options").collapse('hide');
        $("#div_butter_options").collapse('show');
    } else if (checkedValue == "Sandwich") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else if (checkedValue == "Baguette") {
        $("#div_bread_options").collapse('show');
        $("#div_butter_options").collapse('hide');
    } else {
         console.log("Oops.");
    }
});
    });

</script>

</body>
</html>

赞(0）回复(0）举报 2022-11-29

mepcadol2#

实际上常见的问题--在浏览器加载整个文档之前，脚本就已经运行了;基本上身体还不存在。
最简单的解决方案是在一个'documentready'函数中包含任何修改文档的代码。

$(function() {
  // document manipulation code here
});

请注意，如果您的脚本碰巧在标记下面< body >，那么我可能做得太快了，您的代码中可能存在另一个问题。

赞(0）回复(0）举报 2022-11-29

0sgqnhkj3#

使用来自google CDN的最新jQuery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("input[name='input_sandwich_choice']").on("click",function() {
        var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
        alert(checkedValue);
        if(checkedValue=="Panini") {
            $("#div_bread_options").collapse('hide');
            $("#div_butter_options").collapse('show');
        }

        else if(checkedValue=="Sandwich") {
            $("#div_bread_options").collapse('show');
            $("#div_butter_options").collapse('hide');
        }

        else if(checkedValue=="Baguette") {
            $("#div_bread_options").collapse('show');
            $("#div_butter_options").collapse('hide');
        }

        else {
            alert("Oops.");
        }
  });
});
</script>

赞(0）回复(0）举报 2022-11-29

我来回答

jquery 尝试在单击单选按钮时隐藏/显示div

3条答案

相关问题

热门标签

最新问答