No-JS solution
Link to jsFiddle
If you really need to support this without javascript, you could use the checkbox hack, which uses a CSS :checked
selector and a general sibling selector (~
) to target the extra div.
input#optionsRadios2:checked ~ .new {
display: block;
}
However, I'm not sure how many browsers that don't do javascript would be able to handle this CSS3 (as far as I can tell, support is IE8+). I also changed the markup a bit.
Suggested solution
Link to jsFiddle
If you can live with a JS solution, I think it could actually have wider support than the CSS solution above, since it relies on selectors that not all browsers will support.
First, I've wrapped everything in a div to make selecting easier:
<div class="radioFields">
...
</div>
Then add this jQuery inside your document.ready function:
$('.radioFields input[type=radio]').on('change', function(){
var addNew = $('#optionsRadios2:checked').length;
if( addNew ) {
$('.radioFields').addClass('showNew');
} else {
$('.radioFields').removeClass('showNew');
}
});
By only adding and removing CSS classes in your markup, you give yourself a lot of flexibility on how to display things. You can even make it fade in and out. Here's my CSS:
.new {
opacity: 0;
transition: all 0.3s ease;
}
.showNew .new {
opacity: 1;
}
A final idea
Link to jsFiddle
If you've absolutely got to have a bulletproof no-JS solution, you might consider having the .new
fields visible by default, then hidden by javascript, and then revealed again only when needed. Then you're assured that everybody is able to see the extra form. In that case, you'd start with the showNew
class initiated:
<div class="radioFields showNew">
...
</div>
And remove the class with JS as soon as the document loads:
$('.radioFields').removeClass('showNew');
Then run the JS as before. The only drawback here is that your radio buttons could be out of sync with the form--someone could fill out the 'new' form even though the accompanying checkbox is not checked. If you're worried about that, though, some server-side checking could catch the problem and alert the user.