I want to create custom and accessible Radio- and Checkbox-Buttons and found the nice solution of W3C, using divs and aria role="radio".
https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-1/radio-1.html
<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="false" tabindex="0">
Button
</div>
</div>
It looks and works great for me, but I want to implement Radio-Buttons as required fields of the form. Problem: in this solution is no input-element and for this reason no required-attribute possible..
The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of "true" or "false". For example, if a user must fill in an field, then aria-required is set to "true".
<div role="radiogroup" aria-labelledby="group_label_1" aria-required="true" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="false" tabindex="0">
Button
</div>
</div>
you only make it require with add a property
aria-checked = true
into first any radio.
ex:
<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="true" tabindex="0">
Button
</div>
<h3 id="group_label_2">Label2</h3>
<div role="radio" aria-checked="false" tabindex="1">
Button2
</div>
</div>
Check W3school custom radio button for creating custom radio buttons. and you can put required attribute to radio buttons check the following code for the demo.
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<form method="post" action="https://facebook.com" target="_blank">
<label class="container">One
<input type="radio" required="" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio" required="">
<span class="checkmark"></span>
</label>
<input type="submit" value="asd" />
</form>
</body>
</html>
You can simply add the required tag to your input elements.
Here's a working CodePen: https://codepen.io/anon/pen/zWzaKM
Related
I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked
what i have tried ?
I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.
.radio__input{
display:none;
}
.radiobox{
width:60px;
height:60px;
border:1px solid black;
}
//i want the div radiobox to styled when one radiobox is selected
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
XS
</div>
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
S
</div>
You need to keep the radio button somewhere, for the sake of accessibility, and to still be able to select it.
A common solution to styling radio buttons is to style their <label> element instead, and use the CSS Adjacent sibling combinator to style it depending on the radio button’s state.
Some more things should be taken into account to make the component accessible to users who need assistive technology:
you should also use <fieldset> to provide an accessible name to the option group, even though “Green” might be self-explanatory
focus needs to be visible, and since you are hiding the radio button itself, one solution is to show it on the fieldset
each radio button still needs an accessible name, so add some hidden text also inside the labels
.color-options {
display: flex;
padding: .2em;
gap: .4em;
}
.color-options:focus-within {
outline: .2em solid blue;
}
.color-option {
width: 2em;
height: 2em;
}
input:checked+.color-option {
outline: .2em solid darkseagreen;
}
/* kudos to Scott O'Hara
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<fieldset>
<legend>Color</legend>
<div class="color-options">
<input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
<label class="color-option" style="background-color: gray" for="color-gray">
<span class="visually-hidden">
Gray
</span>
</label>
<input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
<label class="color-option" style="background-color: black" for="color-black">
<span class="visually-hidden">
Black
</span>
</label>
<input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
<label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
<span class="visually-hidden">
Dark Green
</span>
</label>
</div>
</fieldset>
I used unique ids for every radio button, which is used by the <label> element's for attribute to associate the labels with the radio buttons. So now the input is also checked when the label is clicked. Then i just styled the initial and checked state. But remember that you can only style elements according to the checked state of an input when they are a sibling or children. You can't access the parent element like in this case the .radiobox container with pure css.
.radiobox {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
input[type="radio"] {
appearance: none;
}
input[type="radio"] + label {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:checked + label {
background: blue;
}
<div class="radiobox">
<input type="radio" id="s" name="radio"/>
<label for="s">S</label>
</div>
<div class="radiobox">
<input type="radio" id="m" name="radio"/>
<label for="m">M</label>
</div>
So I have 5 radio buttons and 5 images. I want, when clicked, each button to show a specific image. However, when I check the radio button with something else, it adds another image instead of replacing it!
Here's the code
https://jsfiddle.net/fcd8s9c8/5/
Here's my JS code
$("#ekoloshki").change(function() {
if (this.checked) {
$("#ekoloshkislika").removeClass("skrijgo");
}
else {
$("#ekoloshkislika").addClass("skrijgo");
}
});
You need to use the id from the currently checked radio button and concatenate it with the word slika.
$('img').addClass('skrijgo');
$('img#' + $(this).attr('id') + 'slika').removeClass('skrijgo');
I've added images to illustrate
$(document).ready(function() {
$('[name="karta"]').change(function() {
$('img').addClass('skrijgo');
$('img#' + $(this).attr('id') + 'slika').removeClass('skrijgo');
});
});
#listata {
display: block;
margin-right: 25%;
margin-left: 25%;
margin-top: 0%;
background-color: white;
}
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#checkboxes {
display: block;
width: 100%;
background-color: white;
border-style: solid;
border-color: black;
height: 5%;
}
.skrijgo {
display: none;
}
#kartata {
margin-top: 2%;
position: relative;
float: center;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="listata">
<div id="checkboxes" class="unselectable">
<label><input type="Radio" id="ekoloshki" name="karta">Еколошки фактори</label>
<p>
<label><input type="Radio" id="socio" name="karta">Социо-економски фактори</label>
<p>
<label><input type="Radio" id="prirodni" name="karta">Природно-географски фактори</label>
<p>
<label><input type="Radio" id="infra" name="karta">Инфраструктурни фактори</label>
<p>
<label><input type="Radio" id="site" name="karta">Сите фактори</label>
</div>
</section>
<!-- Kartite -->
<section>
<div id="kartata">
<img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" id="ekoloshkislika" class="skrijgo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhILUOq_dTGoC4-EqYrk25I3G3RuQkz09hgqABMs9AOg2h-dumkA" id="socioslika" class="skrijgo">
<img src="http://lmsotfy.com/so.png" id="prirodnislika" class="skrijgo">
<img src="https://cdn-images-1.medium.com/max/785/1*H-25KB7EbSHjv70HXrdl6w.png" id="infraslika" class="skrijgo">
<img src="http://www.stickpng.com/assets/images/586aaf811fdce414493f5105.png" id="siteslika" class="skrijgo">
</div>
</section>
Sounds like you want to add the skrijgo class to all the other images that you don't want to show.
I'd go with a more generic solution. For example
$('input[name="kartka"][id]').on('change', function() {
let checkId = `${this.id}slika`
$('#kartata img').each((i, elt) => {
elt.classList.toggle('skrijgo', elt.id !== checkId)
})
})
That is, whenever an input named "kartka" (with an id attribute) changes, iterate over all the <img> elements inside #kartata and if their id attribute matches the radio button's id + 'slika' , then remove the class. If not, then add the class.
I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>
You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.
You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.
You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.
first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}
I disable input type checkbox by adding a disabled.
<input type="checkbox" id="1_2" value="45" aria-checked="false" focusable="true" tabindex="-1" class=" seatNumber " name="code[]" placeholder="2" disabled >
How to disable a checkbox without input type?
<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class=" seatNumber " name="code[]" disable>2</div>
The disabled property won't work on div
First Solution
You have to do it through css Pointer-events and make it selection to none.
Check the below snippet
.disabled{
pointer-events: none;
opacity: 0.4;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class="seatNumber disabled" name="code[]" readonly="true">Disabled div</div>
Second Solution
You can also achieve this by using pseudo elements to make it look like disabled. Using the below css.
Second Snippet
.disabled{
position:relative;
display:inline-block;
}
.disabled:before{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
content: '';
opacity: 0.001;
}
<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class="seatNumber disabled" name="code[]" readonly="true">Disabled div</div>
Well, that div is not a real checkbox so it does not support disable attribute. You have to implement it yourself:
In your JS: remove or disable whatever event handlers you have for that checkbox and add a is-disabled class to it.
In your CSS: style that is-disabled to make it look disabled.
You can fake a disabled div with a before pseudo element
HTML
<div class="disabled">Some text</div>
CSS
div{
display: inline-block;
width: 300px;
height:300px;
text-align:center;
box-sizing: border-box;
border: 1px solid;
position: relative;
background: lightblue;
}
.disabled:before{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #ccc;
content: '';
opacity: 0.5;
}
<div class="disabled">Some text</div>
I have a radio button inside a css accordion and for some reason it doesnt work. Maybe the css I'm using for the accordion is overriding the radio button? maybe because the accordion is made from a check box that is causing problems? I've also put dojo controls inside the accordion and some work, some don't Below is the code: The first radio button outside the accordion works fine
HTML:
<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
<div>
<div style="width: 450px;
height: 80px"></div>
<input type="checkbox" id="checkMTF-1" checked="checked" />
<label for="checkMTF-1">Input System Info</label>
<article>
<input type="radio" name="colors" value="green" />Green <!--this doesnt work-->
<input type="radio" name="colors" value="red" />Red</article>
</div>
<div>
<input type="checkbox" id="checkMTF-2" />
<label for="checkMTF-3">Input Marking Information</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
<div>
<input type="checkbox" id="checkMTF-3" />
<label for="checkMTF-4">Complete and Submit</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
</section>
css:
/Mark Ticket Form Accordion/
#accordionMTF input {
display: none;
}
#accordionMTF label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordionMTF label:hover {
background: #ccc;
}
#accordionMTF input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordionMTF article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordionMTF article p {
padding: 1em;
}
#accordionMTF input:checked article {
}
#accordionMTF input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
I have a fiddle:
here
Thanks
So long as you continue to use the same HTML structure, all you need to do is rework your css a little bit. The follow css
#accordionMTF input {
display: none;
}
Needs to look like this
#accordionMTF > div > input[type='checkbox'] {
display : none;
}
This is an excellent attempt to create an accordion without javascript. You might also consider incorporating CSS3 animations.
There is also a bug where your labels have the wrong for attribute value.
Here is a working fiddle http://jsfiddle.net/czo2m22s/21/
The developer of you accordion has decided to hide ALL inputs (!?)
#accordionMTF input {
display: none;
}
A more sane approach would be to give the inputs that are required for the accordion functionality a class (.hidden) and use that as a selector instead of blanket hidding all inputs:
<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />
.hidden {
display: none;
}
WORKING EXAMPLE
here is the reason:
accordionMTF input {
display: none;
}