JS uncheck radiobutton делает все непроверенным

Question

У меня есть pure CSS accordion и хотел бы добавить некоторые функции для людей, у которых есть JavaScript. Аккордеон CSS работает с: проверенным псевдоклассом.

Новая функциональность: Если снова нажата активная кнопка, все должно рухнуть. Пожалуйста, нет JS-библиотек, таких как jQuery.

Он работает в первый раз, когда щелкнул первоначально незаваленный предмет. Но тогда все кнопки, похоже, выполняют .checked===true. Невозможно проверить элемент больше.

Here is a JSFiddle и это JS (пожалуйста, смотрите за глупые ошибки - я новичок JS):

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

Я также открыт для изменения CheckBox (уже безуспешно испытано вокруг немного) , пока только один элемент не разворачивается за раз (радиобутоподобный). Адрес a Fiddle to play around с флаговыми флажками.

Answer 1

В основном проблема заключается в том, что «щелчок» поворачивает кнопку, чтобы щелкнуть. Затем ваш слушатель «снимите флажок», обнаруживает, что нажата кнопка, а затем отменит его. :(

Это приведет к запуску и возникнет проблема не в том, чтобы сначала отключить галочку, если радиоприемник проверяется при загрузке страницы. Вы можете преодолеть это, запустив несколько js, чтобы снять отметку со всех нагрузка на страницу или проверить силу что-то (и добавить, что мой проверил класс).

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>