JS deaktivieren Radiobutton macht alle nicht änderbar

Question

Ich habe eine pure CSS accordion und möchte einige Funktionalität für Leute, die JavaScript aktiviert haben, hinzufügen. Das CSS-Akkordeon arbeitet mit der Pseudo-Klasse checked. Die neue Funktionalität: Wenn eine bereits aktive Schaltfläche erneut geklickt wird, sollten alle zusammenbrechen. Bitte keine JS-Bibliotheken wie jQuery.

Es funktioniert das erste Mal, wenn Sie auf das anfänglich nicht kollabierte Element klicken. Aber dann scheinen alle Knöpfe .checked===true zu erfüllen. Es ist nicht mehr möglich einen Artikel zu überprüfen.

Here is a JSFiddle und dies ist die JS (bitte siehe auch für dumme Fehler - ich JS Anfänger bin):

function uncheck() { 
    if(this.checked) { 
     this.checked = false; 
    } 
} 

var elements = document.getElementsByClassName("js-uncheck"); 
for (var i=0; i<elements.length; i++) { 
     elements[i].addEventListener("click", uncheck, false); 
} 

Ich bin auch offen für eine Checkbox Variation (bereits erfolglos um ein bisschen getestet) , solange nur ein Objekt gleichzeitig geöffnet ist (Radiobutton-ähnlich). Hier ist a Fiddle to play around mit Kontrollkästchen.

Answer 1

Im Grunde ist das Problem, dass "click" den Knopf zum Klicken schaltet. Dann wird der Listener "uncheck" ausgeführt, er findet, dass auf die Schaltfläche geklickt wurde, und hebt dann die Markierung auf. :(

Dies wird Sie zum Laufen bringen und hat nur das Problem, nicht zu arbeiten, deaktivieren Sie zuerst, wenn das Radio beim Laden der Seite überprüft wird. Sie können dies durch Ausführen von js, um alles beim Laden der Seite zu deaktivieren, oder erzwingen überprüfen etwas (und fügen hinzu, dass my-geprüft Klasse).

function uncheck() { 
 
    var addit = 1; 
 
    if (this.classList.contains('my-checked')) { 
 
    this.checked = false; 
 
    addit = 0; 
 
    } 
 
    var elements = document.getElementsByClassName("js-uncheck"); 
 
    for (var i = 0; i < elements.length; i++) { 
 
    elements[i].classList.remove('my-checked'); 
 
    } 
 
    if (addit) { 
 
    this.classList.add('my-checked'); 
 
    } 
 
} 
 

 
var elements = document.getElementsByClassName("js-uncheck"); 
 
for (var i = 0; i < elements.length; i++) { 
 
    elements[i].addEventListener("click", uncheck, false); 
 
}

/* Author: Michael Raffaele <michael@mraffaele.com> 
 
* Date: 25th October 2011 
 
* Info:  http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/ 
 
*/ 
 
/* Shared for all accordion types */ 
 
.accordion { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    margin: 0 auto; 
 
    font-size: 14px; 
 
    border: 1px solid #542437; 
 
    border-radius: 10px; 
 
    width: 600px; 
 
    padding: 10px; 
 
    background: #fff; 
 
} 
 

 
.accordion ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.accordion li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.accordion [type=radio], 
 
.accordion [type=checkbox] { 
 
    display: inline-block; 
 
} 
 

 
.accordion label { 
 
    display: block; 
 
    font-size: 16px; 
 
    line-height: 16px; 
 
    background: #D95B43; 
 
    border: 1px solid #542437; 
 
    color: #542437; 
 
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-transform: uppercase; 
 
    -webkit-transition: all .2s ease-out; 
 
    -moz-transition: all .2s ease-out; 
 
} 
 

 
.accordion ul li label:hover, 
 
.accordion [type=radio]:checked ~ label, 
 
.accordion [type=checkbox]:checked ~ label { 
 
    background: #C02942; 
 
    color: #FFF; 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) 
 
} 
 

 
.accordion .content { 
 
    padding: 0 10px; 
 
    overflow: hidden; 
 
    border: 1px solid #fff; 
 
    /* Make the border match the background so it fades in nicely */ 
 
    -webkit-transition: all .5s ease-out; 
 
    -moz-transition: all .5s ease-out; 
 
} 
 

 
.accordion p { 
 
    color: #333; 
 
    margin: 0 0 10px; 
 
} 
 

 
.accordion h3 { 
 
    color: #542437; 
 
    padding: 0; 
 
    margin: 10px 0; 
 
} 
 

 

 
/* Vertical */ 
 

 
.vertical ul li { 
 
    overflow: hidden; 
 
    margin: 0 0 1px; 
 
} 
 

 
.vertical ul li label { 
 
    padding: 10px; 
 
} 
 

 
.vertical [type=radio]:checked ~ label, 
 
.vertical [type=checkbox]:checked ~ label { 
 
    border-bottom: 0; 
 
} 
 

 
.vertical ul li label:hover { 
 
    border: 1px solid #542437; 
 
    /* We don't want the border to disappear on hover */ 
 
} 
 

 
.vertical ul li .content { 
 
    height: 0px; 
 
    border-top: 0; 
 
} 
 

 
.vertical [type=radio]:checked ~ label ~ .content, 
 
.vertical [type=checkbox]:checked ~ label ~ .content { 
 
    height: 100px; 
 
    border: 1px solid #542437; 
 
}

<div class="accordion vertical"> 
 
    <ul> 
 
    <li> 
 
     <input type="radio" id="radio-1" name="radio-accordion" class="js-uncheck" checked="checked" /> 
 
     <label for="radio-1">Label radio-1</label> 
 
     <div class="content">I'm the content of radio-1 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111 1111111</div> 
 
    </li> 
 
    <li> 
 
     <input type="radio" id="radio-2" name="radio-accordion" class="js-uncheck" /> 
 
     <label for="radio-2">Label radio-2</label> 
 
     <div class="content">I'm the content of radio-2 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222 2222222</div> 
 
    </li> 
 
    <li> 
 
     <input type="radio" id="radio-3" name="radio-accordion" class="js-uncheck" /> 
 
     <label for="radio-3">Label radio-3</label> 
 
     <div class="content">I'm the content of radio-3 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333 333333</div> 
 
    </li> 
 
    </ul> 
 
</div>