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

时间：2012-01-24 20:03:57

标签： php javascript jquery html forms

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

这里的任何帮助都会非常感激，因为我几个小时以来一直在抨击我。

3 个答案:

答案 0 :(得分：4)

此脚本

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

只有在身体标记的结束时才会起作用。如果它在头部，它将不会做任何事情，因为当脚本运行时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();

答案 1 :(得分：1)

您可以重新构建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相同的类名。这样可以很容易地引用您正在寻找的确切的一个，同时仍然可以轻松触摸其余部分。所以现在你可以循环遍历这些元素的数组，show（）与所选无线电一起的Div，以及hide（）那些不是。所有这些都只需几个小步骤。

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

这是您可以看到DOM的一些强大功能的地方。更简单的代码，更易于维护，以后您可以重复使用它。

我也为你修好了标签。

答案 2 :(得分：0)

这是另一个例子，虽然它确实需要对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>

<强> SCRIPT 

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