Checkbox and Radio buttons behaviour

Question

I am using a set of checkboxes to have some drop-down menus by switching their display:none; to display:block when box or radio is checked.

This is the checkbox version : https://jsfiddle.net/hw207q2L/

and this is the radio version : https://jsfiddle.net/3xzuw47x/

I'd like to combine both so that when opening a new part it closes the other ones (radio behaviour) ; while at the same time being able to close the part I opened by clicking it again (checkbox behaviour).

Any ideas that wouldn't involve javascript ? I'd like to restrain from using js, but if it's not possible tell me.

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

It requires functionality that prevents default behavior, so it's unlikely to make it happen without the using of additional framework or javascript.

This not exactly a duplicate, but please check How to uncheck checked radio button [duplicate].

Just use this javascript in your second version of code:

var allRadios = document.getElementsByName('titles');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
    allRadios[x].onclick = function() {
        if(booRadio == this){
            this.checked = false;
            booRadio = null;
        }else{
            booRadio = this;
        }
    };
}

edited May 23 '17 at 12:24

Community

1
1

answered Jun 10 '16 at 15:00

solosodium

723
5
15

If you found an answer you can post the link as a comment or mark as duplicate but repost the answer here just copy / paste ... – DaniP Jun 10 '16 at 15:04
Copied it and works like a charm. Thanks :) – Saryk Jun 10 '16 at 15:14
How do I do duplicate? – solosodium Jun 10 '16 at 15:14

Checkbox and Radio buttons behaviour

1 Answers1