admin管理员组

文章数量:1026989

I'm having an issue with radio buttons showing one div and hiding the rest. I have my code which I'll post below (tested and working in jsfiddle but not when I put it onto my page).

To give you an idea of what I'm after, I am making a registration page. The radio buttons will control a div that has the form placed inside it, so radio 1 checked, div 1 is selected, and the rest hidden and so on.

Here's my 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>

and here's the 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>

Any help here will be really appreciated as I've been banging my head against this for hours.

I'm having an issue with radio buttons showing one div and hiding the rest. I have my code which I'll post below (tested and working in jsfiddle but not when I put it onto my page).

To give you an idea of what I'm after, I am making a registration page. The radio buttons will control a div that has the form placed inside it, so radio 1 checked, div 1 is selected, and the rest hidden and so on.

Here's my 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>

and here's the 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>

Any help here will be really appreciated as I've been banging my head against this for hours.

  • php
  • javascript
  • jquery
  • html
  • forms
Share Improve this question edited Jan 24, 2012 at 20:12 mowwwalker 17.4k30 gold badges108 silver badges165 bronze badges asked Jan 24, 2012 at 20:03 mikemike 431 silver badge6 bronze badges 1
  • I have tested with your code, as you mentioned when i click on first radio button the first div is visible and others are hidden.It is working for me.Can you explain me what is your issue?. – sathishkumar Commented Jan 24, 2012 at 20:16
Add a ment  | 

3 Answers 3

Reset to default 4

This script

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

Will only work if it's at the end of your body tag. If it's in the head, it won't do anything, since the dom won't be ready when the script runs.

The easiest way to fix this is to put this code into a document.ready handler:

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

You should be able to trim this code down and do it all in one shot by looking at the radio that's checked

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

You could restructure your HTML to make your life MUCH easier.

Here is an example:

<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>

Now, if you'll take a note at the restructuring, you'll see a few things. First, the Divs that contained the different account types are inside a holding Div. You don't need to do that, but it makes it easier to isolate them. You could just as easily have given them all a similar class to acplish the same task.

Secondly, they now have class names that are the same as their associated input ID. This makes it very easy to reference the exact one you are looking for, while still making it easy to touch the rest of them too. So now you can loop through the array of these elements, show() the Div that goes along with the selected radio, and hide() the ones that aren't. All in a few small steps.

This also makes it much easier to add new parts to your code. Otherwise, if you added a new section, you'd have to edit each if() statement you made, adding the new section to make sure it shows and hides properly.

This is where you can see some of the power of the DOM. Much simpler code, easier to maintain, and you can reuse it later on.

I also fixed the labels for you too.

Here is another example, though it does require a little change to HTML to make it neat/easy to manage.

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

I'm having an issue with radio buttons showing one div and hiding the rest. I have my code which I'll post below (tested and working in jsfiddle but not when I put it onto my page).

To give you an idea of what I'm after, I am making a registration page. The radio buttons will control a div that has the form placed inside it, so radio 1 checked, div 1 is selected, and the rest hidden and so on.

Here's my 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>

and here's the 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>

Any help here will be really appreciated as I've been banging my head against this for hours.

I'm having an issue with radio buttons showing one div and hiding the rest. I have my code which I'll post below (tested and working in jsfiddle but not when I put it onto my page).

To give you an idea of what I'm after, I am making a registration page. The radio buttons will control a div that has the form placed inside it, so radio 1 checked, div 1 is selected, and the rest hidden and so on.

Here's my 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>

and here's the 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>

Any help here will be really appreciated as I've been banging my head against this for hours.

  • php
  • javascript
  • jquery
  • html
  • forms
Share Improve this question edited Jan 24, 2012 at 20:12 mowwwalker 17.4k30 gold badges108 silver badges165 bronze badges asked Jan 24, 2012 at 20:03 mikemike 431 silver badge6 bronze badges 1
  • I have tested with your code, as you mentioned when i click on first radio button the first div is visible and others are hidden.It is working for me.Can you explain me what is your issue?. – sathishkumar Commented Jan 24, 2012 at 20:16
Add a ment  | 

3 Answers 3

Reset to default 4

This script

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

Will only work if it's at the end of your body tag. If it's in the head, it won't do anything, since the dom won't be ready when the script runs.

The easiest way to fix this is to put this code into a document.ready handler:

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

You should be able to trim this code down and do it all in one shot by looking at the radio that's checked

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

You could restructure your HTML to make your life MUCH easier.

Here is an example:

<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>

Now, if you'll take a note at the restructuring, you'll see a few things. First, the Divs that contained the different account types are inside a holding Div. You don't need to do that, but it makes it easier to isolate them. You could just as easily have given them all a similar class to acplish the same task.

Secondly, they now have class names that are the same as their associated input ID. This makes it very easy to reference the exact one you are looking for, while still making it easy to touch the rest of them too. So now you can loop through the array of these elements, show() the Div that goes along with the selected radio, and hide() the ones that aren't. All in a few small steps.

This also makes it much easier to add new parts to your code. Otherwise, if you added a new section, you'd have to edit each if() statement you made, adding the new section to make sure it shows and hides properly.

This is where you can see some of the power of the DOM. Much simpler code, easier to maintain, and you can reuse it later on.

I also fixed the labels for you too.

Here is another example, though it does require a little change to HTML to make it neat/easy to manage.

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

本文标签： phpHiding divs based on a selected radio buttonStack Overflow

版权声明：本文标题：php - Hiding divs based on a selected radio button - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745657925a2161709.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。