根据选定的单选按钮隐藏 div答案

【问题标题】：Hiding divs based on a selected radio button根据选定的单选按钮隐藏 div
【发布时间】：2012-02-18 01:57:38
【问题描述】：

我遇到了单选按钮显示一个 div 并隐藏其余部分的问题。我有我的代码，我将在下面发布（在 jsfiddle 中测试和工作，但当我把它放到我的页面上时没有）。

为了让您了解我的目标，我正在制作一个注册页面。单选按钮将控制其中放置表单的 div，因此选中单选按钮 1，选择 div 1，其余部分隐藏等等。

这是我的 jquery：

<script type="text/javascript">
$('#accountchoice').change(function() {
if ($('#personalfan').attr('checked')) {
    $('#personalfan1').show();
    $('#soloartist1').hide();
    $('#band1').hide();
    $('#venue1').hide();
    $('#business1').hide();
    $('#service1').hide();
} else if ($('#soloartist').attr('checked')) {
    $('#soloartist1').show();
    $('#personalfan1').hide();
    $('#band1').hide();
    $('#venue1').hide();
    $('#business1').hide();
    $('#service1').hide();
} else if ($('#band').attr('checked')) {
    $('#band1').show();
    $('#personalfan1').hide();
    $('#soloartist1').hide();
    $('#venue1').hide();
    $('#business1').hide();
    $('#service1').hide();
} else if ($('#venue').attr('checked')) {
    $('#venue1').show();
    $('#personalfan1').hide();
    $('#soloartist1').hide();
    $('#band1').hide();
    $('#business1').hide();
    $('#service1').hide();
} else if ($('#business').attr('checked')) {
    $('#business1').show();
    $('#personalfan1').hide();
    $('#soloartist1').hide();
    $('#band1').hide();
    $('#venue1').hide();
    $('#service1').hide();
} else if ($('#service').attr('checked')) {
    $('#service1').show();
    $('#personalfan1').hide();
    $('#soloartist1').hide();
    $('#band1').hide();
    $('#venue1').hide();
    $('#business1').hide();


 }
 });
 </script>

这是 HTML

 <body>
 <?php include_once "header_template.php"; ?>
   <div id="signupwrapper">
 <div id="signupinner">

       <h3 align="left"> GETSCENE REGISTRATION ! </h3>
       <hr />

    <div id="signup" style="border:thin; border-color:#666">
    <h4 align="left">Please Choose One of The Following Account Types</h4>
        <div id="accountswrapper">
  <form id="accountchoice" name="accountchoice" method="post" action="">

  <label for="radio">personal/fan</label>   
  <input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />

  <label for="radio2">Solo artist</label>   
  <input type="radio" name="radio" id="soloartist" value="radio2" />

  <label for="radio3">band</label>               
  <input type="radio" name="radio" id="band" value="radio3" />

  <label for="radio4">venue</label>   
  <input type="radio" name="radio" id="venue" value="radio4" />

  <label for="radio5">business</label>   
  <input type="radio" name="radio" id="business" value="radio5" />

  <label for="radio6">service</label>   
  <input type="radio" name="radio" id="service" value="radio6" />
  </form>  

  <hr />
  <div id="personalfan1">1</div>
  <div id="soloartist1">2</div>
  <div id="band1">3</div>
  <div id="venue1">4</div>
  <div id="business1">5</div>
  <div id="service1">6</div>
  </div>
   </div>
</div>
</div>
<?php include_once "footer_template.php"; ?>
</body>

这里的任何帮助都将不胜感激，因为我已经为此努力了好几个小时了。

【问题讨论】：

我已经用你的代码进行了测试，正如你提到的，当我点击第一个单选按钮时，第一个 div 是可见的，而其他 div 是隐藏的。它对我有用。你能解释一下你的问题是什么吗？ .

标签： php javascript jquery html forms

【解决方案1】：

这个脚本

<script type="text/javascript">
$('#accountchoice').change(function() {

只有在你的 body 标签的 end 处才有效。如果它在头部，它不会做任何事情，因为脚本运行时 dom 不会准备好。

解决此问题的最简单方法是将此代码放入 document.ready 处理程序中：

$(function() {
    //this will run when the dom is ready
    $('#accountchoice').change(function() {
});

您应该能够通过查看已检查的收音机来修剪此代码并一次性完成所有操作

var allDivs = ['venue1', 'personalfan1', 'soloartist1', 'band1', 'business1', 'service1'];

var radio = $("input[type='radio']:checked");
if (radio.length === 0)
    return;
$('#' + allDivs.join(',#')).hide();
$("div#" + radio[0].id + "1").show();

【讨论】：

jQuery 是否允许在表单上使用 .change()？
@Walkerneo - 我不确定，但如果不是，有一些简单的解决方法：$("input", "#formId").change(function() { ...
另外，这些是收音机而不是复选框。
顶部可以是$('body').on('change','input[name="radio"]',function() {
好棒的家伙，终于按照亚当的建议工作了。我现在唯一的问题是，当我第一次加载页面时，我显示了所有 6 个 div。有没有一种简单的方法可以将默认设置为页面加载的第一个收音机？

【解决方案2】：

您可以重组您的 HTML，让您的生活更轻松。

这是一个例子：

<style type="text/css">
    #account_types > div { display: none; }
</style>
<div id="signupwrapper">
    <div id="signupinner">
        <h3 align="left"> GETSCENE REGISTRATION ! </h3>
        <hr />
        <div id="signup" style="border:thin; border-color:#666">
            <h4 align="left">Please Choose One of The Following Account Types</h4>
            <div id="accountswrapper">
                <form id="accountchoice" name="accountchoice" method="post" action="">
                    <label for="personalfan">personal/fan</label>   
                    <input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />

                    <label for="soloartist">Solo artist</label>   
                    <input type="radio" name="radio" id="soloartist" value="radio2" />

                    <label for="band">band</label>               
                    <input type="radio" name="radio" id="band" value="radio3" />

                    <label for="venue">venue</label>   
                    <input type="radio" name="radio" id="venue" value="radio4" />

                    <label for="business">business</label>   
                    <input type="radio" name="radio" id="business" value="radio5" />

                    <label for="service">service</label>   
                    <input type="radio" name="radio" id="service" value="radio6" />
                </form>  

                <hr />
                <div id="account_types">
                    <div class="personalfan">1</div>
                    <div class="soloartist">2</div>
                    <div class="band">3</div>
                    <div class="venue">4</div>
                    <div class="business">5</div>
                    <div class="service">6</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $('#accountchoice').change(function() {
            var divToShow = $(this).find('input:checked').attr('id');
            $('#account_types > div').each(function() {
                if($(this).hasClass(divToShow)) { $(this).show(); }
                else { $(this).hide();}
            });

        });

        $('#accountchoice').trigger('change');
    });
</script>

现在，如果您在重组时记下笔记，您会看到一些事情。首先，包含不同账户类型的 Div 位于控股 Div 中。你不需要这样做，但它可以更容易地隔离它们。你可以很容易地给他们一个类似的类来完成同样的任务。

其次，它们现在具有与其关联的输入 ID 相同的类名。这使得引用您正在寻找的确切内容变得非常容易，同时仍然可以轻松触摸其余部分。因此，现在您可以遍历这些元素的数组，显示（）与所选收音机一起使用的 Div，并隐藏（）不是的那些。只需几个小步骤。

这也使得向代码中添加新部分变得更加容易。否则，如果您添加了新部分，则必须编辑您所做的每个 if() 语句，添加新部分以确保其正确显示和隐藏。

在这里您可以看到 DOM 的一些强大功能。更简单的代码，更易于维护，并且您可以在以后重用它。

我也为你修复了标签。

【讨论】：

tim 这也很有效，并且真的简化了代码，正如你可能知道的那样，我还在学习 js，也感谢重命名和修复标签哈哈。尽管如此，即使这样，默认的personalfan div 也会在页面加载时隐藏，所以猜测我仍然需要将代码放入函数中？
不，你实际上可以做一些简单的事情，$('#accountchoice').trigger('change'); 我已经更新了这个例子来告诉你它会去哪里。
蒂姆和亚历克斯，真的非常感谢你们，你们所有人！我的大脑不再觉得它不适合我的脑袋，哈哈。一切都井井有条，花花公子，当网站上线时，defo会提醒你们：)

【解决方案3】：

这是另一个示例，尽管它确实需要对 HTML 进行一些更改以使其整洁/易于管理。

HTML

// Added class "choice" to the radio inputs
<input type="radio" name="radio" id="venue" class="choice" value="radio4" />
<input type="radio" name="radio" id="business" class="choice" value="radio5" />
<input type="radio" name="radio" id="service" class="choice" value="radio6" />

<div class="account_types">
    <div class="dynamic" id="venue1">
        4</div>
    <div class="dynamic" id="business1">
        5</div>
    <div class="dynamic" id="service1">
        6</div>
</div>

脚本

$('input.choice').click(function () {
    var eleToShow = this.id + "1";
    $('div', '.account_types').hide();
    $('#' + eleToShow).show();
});

【讨论】：