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

我有一个问题，单选按钮显示一个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>

在这里的任何帮助都将不胜感激，因为我已经用头撞了好几个小时了。

此脚本

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

只有当它位于body标签的端时才有效。如果它在头脑中，它就不会做任何事情，因为当脚本运行时，dom还没有准备好。

修复此问题的最简单方法是将此代码放入文档中。就绪处理程序：

$(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();

您可以重组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，并隐藏（）没有的Div。只需几小步。

这也使得向代码中添加新部件变得更加容易。否则，如果你添加了一个新的部分，你就必须编辑你所做的每个if（）语句，添加新的部分以确保它正确地显示和隐藏。

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

我也帮你修了标签。

这里是另一个例子，尽管它确实需要对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();
});

相关内容

最新更新

热门标签：