checked radio button show a div

Question

I have this markup one of my web pages,

<div class="radio-spoof">
    <input type="radio" name="enquiry" value="General enquiry" class="radio"/>
    <div class="checked"></div>
</div>
<label for="general_enquiry">General enquiry</label>
<div class="radio-spoof">
    <input type="radio" name="enquiry" value="Request a brochure" class="radio" checked="true"/>
    <div class="checked"></div>
</div>
<label for="request_a_brochure">Request a brochure</label>

Basically what I am doing is trying to spoof some radio buttons, so I can have good looking ones, when a radio is checked I want to display .checked which is set to display:none by default. I need to check for a checked radio button on DOMReady and when ever a radio is clicked, currently I have this page, but it does not seem to be making the selection of the .checked div correctly.

if($('input[type=radio]:checked')) { console.log("!"); $(this).parent().children('div').show(); }

I would expect the code above the select the radio buttons parent, and then look for a child div (.checked) and show it. Am I mistaken? `

you can do its by using background images & wrapping radio button around span and then changing background-position on checked or unchecked — SVS, Jul 09 '12 at 10:47

Tats_innit · Answer 1 · 2012-07-09T11:12:12.780

0

demo you need to register an event when check box state changes : http://jsfiddle.net/FtPLS/2/ or http://jsfiddle.net/QCkpG/1/

Also I reckon you should use .next instead of .children.
if you want to hide .checked just do this => $('.checked').hide()
you could use $('input[type=radio]').is(':checked') for your check/uncheck condition.

Hope this helps the cause, :)

code

$(function() {
    // here ==> $('.checked').hide(); will hide all the div with checked class
    $('input').click(function() { // can use .change instead if you want
        if ($('input[type=radio]').is(':checked')) {
            alert('!')
            $(this).parent().next('div').show(); // whatever you wanna show or 
            //$(this).next('div').show();
        }
    });
});

edited Jul 09 '12 at 11:12

answered Jul 09 '12 at 10:50

Tats_innit

33,101
9
67
75

1

Why not use `.change()`? I don't know if click will be triggered when changing the value using the keyboard – Thomas Jul 09 '12 at 10:52
Hiya @Thomas yes you can use `.change` as well read here `:)` http://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event I reckon click vs change is a bit of explanation there are good questions about them **good read** http://stackoverflow.com/questions/5575338/what-the-difference-between-click-and-change-on-a-checkbox – Tats_innit Jul 09 '12 at 10:56
I didn't know this but change would still be better I think. From the jQuery docs: `For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.` – Thomas Jul 09 '12 at 11:01
@Thomas yep indeed I concur with you! `:)` OP has options he/she can read it and decide, yes I agree and not at all has doubts that `.change` should not be used. – Tats_innit Jul 09 '12 at 11:03

score 0 · Answer 2 · answered Jul 09 '12 at 11:08

For above issue, i have done solution on codebins. So, try it on http://codebins.com/codes/home/4ldqpb6

Solution:

$(document).ready(function() {
    $('input[type=radio]').each(function() {
        if ($(this).is(':checked')) {
            $(this).next('.checked').show();
        }
        $(this).click(function() {
            if ($(this).is(':checked')) {
                $(this).next('.checked').show();
            }
        });
    });
});

plz Don't forget to `.hide` the `checked` divs as well `:)` – Tats_innit Jul 09 '12 at 11:12 — Tats_innit, Jul 09 '12 at 11:12

score 0 · Accepted Answer · answered Jul 09 '12 at 11:14

0

$(function(){
  $(':radio').change(function(){
    var $this = $(this);
    console.log($this);
    $(':radio[name='+this.name+']').next().hide();
    if($this.is(':checked')){
      $this.next('.checked').show();
    }
  });
});

answered Jul 09 '12 at 11:14

Thomas

6,550
1
23
42

score 0 · Answer 4 · answered Jul 09 '12 at 11:23

It seems to me that you're trying to get custom-styled radiobuttons? A pretty cool way without JS I had in a project was this (adapted to your code):

HTML

<div class="radio-spoof">
    <input id="radio-1" type="radio" name="enquiry" value="General enquiry" class="radio"/>
    <label for="radio-1">General enquiry</label>
</div>

CSS

.radio-spoof input {
  position: absolute;
  left: -9999px;
} /* not display: none so it is tabbable */

.radio-spoof label {
  display: inline-block;
  padding-left: 35px; /* width of your custom image + spacing to text */
  height: 30px;
  line-height: 30px; /* height of your custom image */
  background: url(your/custom/image) center left no-repeat;
}

.radio-spoof input:checked + label {
  background-image: url(your/custom/active/image);
}

The checkbox toggles everytime the label gets clicked, they're connected through input id and label for, and the label gets the input style.

If you want the checkboxes to look like default if they're not checked you can set it up like this:

CSS

.radio-spoof input + label { display: none }

.radio-spoof input:checked {
  position: absolute;
  left: -9999px;
}

.radio-spoof input:checked + label {
  display: inline-block;
  padding-left: 35px; /* width of your custom image + spacing to text */
  height: 30px;
  line-height: 30px; /* height of your custom image */
  background: url(your/custom/image) center left no-repeat;
}

Then you have default radios and if they're checked the label takes their place...

checked radio button show a div

4 Answers4