Angular Checkbutton Behaviour wrong - javascript

i have a big problem with the (probably) the scopes here but i cannot see through it.
I want to have my own css-modified tooglebuttons behave the same way, as the other buttons already do , i've tried to adopted it from this site:
http://jsfiddle.net/opensas/ye6At/
Here my is my fiddle:
http://jsfiddle.net/fs0tL62s/
My second button is reacting to the values but i cannot control it differently.
Thx in advance.
My code is the following:
my CSS:
.onoffswitch {
position: relative;
width: 92px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Local";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Remote";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 22px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 58px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
my JS:
angular.module('bootstrap', []).directive('button', function() {
return {
restrict: 'E',
require: 'ngModel',
link: function($scope, element, attr, ctrl) {
// ignore other kind of button groups (e.g. buttons-radio)
if (!element.parent('[data-toggle="buttons-checkbox"].btn-group').length) {
return;
}
// set/unset 'active' class when model changes
$scope.$watch(attr.ngModel, function(newValue, oldValue) {
element.toggleClass('active', ctrl.$viewValue);
});
// update model when button is clicked
element.bind('click', function(e) {
$scope.$apply(function(scope) {
ctrl.$setViewValue(!ctrl.$viewValue);
});
// don't let Bootstrap.js catch this event,
// as we are overriding its data-toggle behavior.
e.stopPropagation();
});
}
};
});
angular.module('sample', ['bootstrap']);
function SampleController($scope) {
console.log('model');
$scope.myModel = {
};
}
and my html:
<div ng-app="sample" ng-controller="SampleController">
<ul>
<li>myModel.optionA:{{myModel.optionA}}</li>
<li>myModel.optionB: {{myModel.optionB}}</li>
</ul>
<form class="form-inline">
<label class="checkbox">
<input type="checkbox" ng-model="myModel.optionA"> A
</label>
<label class="checkbox">
<input type="checkbox" ng-model="myModel.optionB"> B
</label>
</form>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" ng-model="myModel.optionA" class="btn">A</button>
<button type="button" ng-model="myModel.optionB" class="btn">B</button>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
id="myonoffswitch" checked ng-model="myModel.optionB">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
id="myonoffswitch" checked ng-model="myModel.optionA">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>


You have an id collision:
change the id for the last button (and the label "for" attribute to match it) to something different and it works.
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked ng-model="myModel.optionA">
<label class="onoffswitch-label" for="myonoffswitch2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Updated fiddle

Related

How to add check box using field-wrap tag in html?

I'm trying to add check using field-wrap tag, but space submit button and check box non-aligned. I have to two forms called sign up and login. Sign up form contains many fields like name, email, password, etc.. Tried in terms and condition using checkbox in sign up form, but alignment is messed up.
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Business Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label>
Name on Card<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Card Number<span class="req">*</span>
</label>
<input type="number"required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label>
MM<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
YYYY<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
CVC<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label><input type="checkbox" />Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block"/>Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
From snippet can able to see check box and submit button are non aligned. How to add check box like above input field with correct space?

You have coded CSS for input, so for all input element, it will take width:100% & height:100% etc...
See the attached snippet
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
/* position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
pointer-events: none;*/
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
[type=checkbox], [type=radio] {
box-sizing: border-box;
padding: 0;
width: 20px;
height: 20px;
display: inline;
vertical-align: middle;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label> First Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label> Last Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Business Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label> Name on Card<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Card Number<span class="req">*</span> </label>
<input type="number" required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label> MM<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> YYYY<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> CVC<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
<input type="checkbox" >
Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block">Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block">Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->

How to select each drop-down column by itself using one function [duplicate]

This question already has answers here:
getElementById succeeds once then returns null
(2 answers)
Closed 4 years ago.
I'm trying to create a drop-down bar with few columns. I wrote a function but it works only for the first column. I tried already by className . How could I open them one by one? Now if I click the 3rd one for example it opens the first one
Here is the live https://codepen.io/oleanderek/pen/dwEZxN
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function changeArrow() {
var arrow = document.getElementById("arrow");
if (arrow.classList.contains("down-arrow")) {
// Has my-class in it
arrow.classList.remove("down-arrow");
arrow.classList.add("up-arrow");
}
else if (arrow.classList.contains("up-arrow")) {
// Has my-class in it
arrow.classList.remove("up-arrow");
arrow.classList.add("down-arrow");
}
}
.github {
margin-top: 50px; }
.multiselect {
width: 170px;
margin-top: 80px;
position: absolute;
z-index: 40;
display: flex;
flex-direction: row; }
.selectBox {
position: relative; }
.selectBox select {
width: 100%;
font-weight: bold; }
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#checkboxes {
display: none;
background-color: #e5e5e5;
border: none; }
.checkboxes__container {
display: flex;
height: auto;
margin-bottom: 10px; }
.checkboxes__container--input {
display: flex;
margin: 0 15px; }
.checkboxes__container--text {
display: flex;
align-items: center;
margin: 0 15px; }
#checkboxes input {
border: none;
background-color: #fff; }
#checkboxes label {
display: block;
width: 25px;
height: 25px;
cursor: pointer;
position: relative;
background-color: #fff;
border: 1px solid lightgray; }
#checkboxes label:after {
content: '';
width: 13px;
height: 11px;
position: absolute;
top: 4px;
left: 4px;
border: 2px solid #6d3838;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
#checkboxes label:hover::after {
opacity: 0; }
#checkboxes input[type=checkbox] {
visibility: hidden; }
#checkboxes input[type=checkbox]:checked + label:after {
opacity: 1; }
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
width: 170px !important;
height: 35px;
border: none;
box-sizing: border-box;
padding-left: 25px; }
.select-container {
display: flex;
width: 170px;
background-color: #e5e5e5; }
.down-arrow {
background-image:url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");}
.up-arrow {
background-image: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png"); }
#arrow {
width: 35px;
box-sizing: border-box;
padding: 10px;
background-color: #00a671; }
.squaredFour {
width: 20px;
position: relative;
margin: 20px auto; }
.squaredFour label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
border: 1px solid lightgray; }
.squaredFour label:after {
content: '';
width: 12px;
height: 8px;
position: absolute;
top: 20%;
left: 25%;
/* transform: translate(-50%,-50%); */
border: 2px solid #6d3838;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.squaredFour label:hover::after {
opacity: 0; }
.squaredFour input[type=checkbox] {
visibility: hidden; }
.squaredFour input[type=checkbox]:checked + label:after {
opacity: 1; }
<div class="multiselect">
<div>
<div class="selectBox" onclick="showCheckboxes(); changeArrow();">
<div class="select-container">
<select>
<option>ogródek/strych</option>
</select>
<img id="arrow" class="down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="one">
<label for="one"></label>
</span>
<span class="checkboxes__container--text">
<span>ogródek</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="two">
<label for="two"></label>
</span>
<span class="checkboxes__container--text">
<span>strych</span>
</span>
</div>
</div>
</div>
<div>
<div class="selectBox" onclick="showCheckboxes(); changeArrow();">
<div class="select-container">
<select>
<option>status</option>
</select>
<img id="arrow" class="down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="three">
<label for="three"></label>
</span>
<span class="checkboxes__container--text">
<span>wolne</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="four">
<label for="four"></label>
</span>
<span class="checkboxes__container--text">
<span>rezerwacja</span>
</span>
</div>
</div>
</div>
<div>
<div class="selectBox" onclick="showCheckboxes(); changeArrow();">
<div class="select-container">
<select>
<option>status</option>
</select>
<img id="arrow" class="down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="three">
<label for="three"></label>
</span>
<span class="checkboxes__container--text">
<span>wolne</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="four">
<label for="four"></label>
</span>
<span class="checkboxes__container--text">
<span>rezerwacja</span>
</span>
</div>
</div>
</div>
</div>

First of all an id can only be used once on a page. So checkboxes and arrow won't work.
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
let selects = document.getElementsByClassName("selectBox");
for(let select of selects)
{
let checkbox = select.nextElementSibling;
let arrow = select.getElementsByClassName("arrow")[0];
console.log(checkbox, arrow);
select.addEventListener("click", () => {
if(checkbox.classList.contains("expanded"))
{
checkbox.style.display = "none";
checkbox.classList.remove("expanded");
arrow.classList.remove("up-arrow");
arrow.classList.add("down-arrow");
} else {
checkbox.style.display = "block";
checkbox.classList.add("expanded");
arrow.classList.remove("down-arrow");
arrow.classList.add("up-arrow");
}
});
}
.github {
margin-top: 50px; }
.multiselect {
width: 170px;
margin-top: 80px;
position: absolute;
z-index: 40;
display: flex;
flex-direction: row; }
.selectBox {
position: relative; }
.selectBox select {
width: 100%;
font-weight: bold; }
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.checkboxes {
display: none;
background-color: #e5e5e5;
border: none; }
.checkboxes__container {
display: flex;
height: auto;
margin-bottom: 10px; }
.checkboxes__container--input {
display: flex;
margin: 0 15px; }
.checkboxes__container--text {
display: flex;
align-items: center;
margin: 0 15px; }
.checkboxes input {
border: none;
background-color: #fff; }
.checkboxes label {
display: block;
width: 25px;
height: 25px;
cursor: pointer;
position: relative;
background-color: #fff;
border: 1px solid lightgray; }
.checkboxes label:after {
content: '';
width: 13px;
height: 11px;
position: absolute;
top: 4px;
left: 4px;
border: 2px solid #6d3838;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.checkboxes label:hover::after {
opacity: 0; }
.checkboxes input[type=checkbox] {
visibility: hidden; }
.checkboxes input[type=checkbox]:checked + label:after {
opacity: 1; }
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
width: 170px !important;
height: 35px;
border: none;
box-sizing: border-box;
padding-left: 25px; }
.select-container {
display: flex;
width: 170px;
background-color: #e5e5e5; }
.down-arrow {
background-image:url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");}
.up-arrow {
background-image: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png"); }
.arrow {
width: 35px;
box-sizing: border-box;
padding: 10px;
background-color: #00a671; }
.squaredFour {
width: 20px;
position: relative;
margin: 20px auto; }
.squaredFour label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
border: 1px solid lightgray; }
.squaredFour label:after {
content: '';
width: 12px;
height: 8px;
position: absolute;
top: 20%;
left: 25%;
/* transform: translate(-50%,-50%); */
border: 2px solid #6d3838;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.squaredFour label:hover::after {
opacity: 0; }
.squaredFour input[type=checkbox] {
visibility: hidden; }
.squaredFour input[type=checkbox]:checked + label:after {
opacity: 1; }
<div class="multiselect">
<div>
<div class="selectBox">
<div class="select-container">
<select>
<option>ogródek/strych</option>
</select>
<img class="arrow down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="one">
<label for="one"></label>
</span>
<span class="checkboxes__container--text">
<span>ogródek</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="two">
<label for="two"></label>
</span>
<span class="checkboxes__container--text">
<span>strych</span>
</span>
</div>
</div>
</div>
<div>
<div class="selectBox">
<div class="select-container">
<select>
<option>status</option>
</select>
<img class="arrow down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="three">
<label for="three"></label>
</span>
<span class="checkboxes__container--text">
<span>wolne</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="four">
<label for="four"></label>
</span>
<span class="checkboxes__container--text">
<span>rezerwacja</span>
</span>
</div>
</div>
</div>
<div>
<div class="selectBox">
<div class="select-container">
<select>
<option>status</option>
</select>
<img class="arrow down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="three">
<label for="three"></label>
</span>
<span class="checkboxes__container--text">
<span>wolne</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="four">
<label for="four"></label>
</span>
<span class="checkboxes__container--text">
<span>rezerwacja</span>
</span>
</div>
</div>
</div>
</div>

You can achieve that by changing the id checkbox to class (id's need to be unique). When binding the click event with javascript you get nice use of this. You can use the property this.nextElementSibling property to get the .checkbox belonging to the arrow.
Also changed your if statement to check on the display property of the element instead of a global var. You do need to set the initial value on none to avoid bugs (it's not exactly the same as the css style)
Also you might want to combine the 2 functions depending on other usages of them.
Note: You should change the elements with id arrow too so that i will be unique. It didn't give problems with this snippet but will likely give you headaches in the future.
document.querySelectorAll(".selectBox").forEach((el) => {
el.addEventListener('click', showCheckboxes);
el.addEventListener('click', changeArrow);
el.nextElementSibling.style.display = "none";
});
function showCheckboxes() {
var thisCheckbox = this.nextElementSibling;
if (thisCheckbox.style.display == "none") {
thisCheckbox.style.display = "block";
} else {
thisCheckbox.style.display = "none";
}
}
function changeArrow() {
var arrow = this.getElementsByClassName('arrow')[0];
if (arrow.classList.contains("down-arrow")) {
arrow.classList.remove("down-arrow");
arrow.classList.add("up-arrow");
} else if (arrow.classList.contains("up-arrow")) {
arrow.classList.remove("up-arrow");
arrow.classList.add("down-arrow");
}
}
.github {
margin-top: 50px;
}
.multiselect {
width: 170px;
margin-top: 80px;
position: absolute;
z-index: 40;
display: flex;
flex-direction: row;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.checkboxes {
background-color: #e5e5e5;
border: none;
}
.checkboxes__container {
display: flex;
height: auto;
margin-bottom: 10px;
}
.checkboxes__container--input {
display: flex;
margin: 0 15px;
}
.checkboxes__container--text {
display: flex;
align-items: center;
margin: 0 15px;
}
.checkboxes input {
border: none;
background-color: #fff;
}
.checkboxes label {
display: block;
width: 25px;
height: 25px;
cursor: pointer;
position: relative;
background-color: #fff;
border: 1px solid lightgray;
}
.checkboxes label:after {
content: '';
width: 13px;
height: 11px;
position: absolute;
top: 4px;
left: 4px;
border: 2px solid #6d3838;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkboxes label:hover::after {
opacity: 0;
}
.checkboxes input[type=checkbox] {
visibility: hidden;
}
.checkboxes input[type=checkbox]:checked+label:after {
opacity: 1;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
width: 170px !important;
height: 35px;
border: none;
box-sizing: border-box;
padding-left: 25px;
}
.select-container {
display: flex;
width: 170px;
background-color: #e5e5e5;
}
.down-arrow {
background-image: url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
}
.up-arrow {
background-image: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
.arrow {
width: 35px;
box-sizing: border-box;
padding: 10px;
background-color: #00a671;
}
.squaredFour {
width: 20px;
position: relative;
margin: 20px auto;
}
.squaredFour label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
border: 1px solid lightgray;
}
.squaredFour label:after {
content: '';
width: 12px;
height: 8px;
position: absolute;
top: 20%;
left: 25%;
/* transform: translate(-50%,-50%); */
border: 2px solid #6d3838;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredFour label:hover::after {
opacity: 0;
}
.squaredFour input[type=checkbox] {
visibility: hidden;
}
.squaredFour input[type=checkbox]:checked+label:after {
opacity: 1;
}
<div class="multiselect">
<div>
<div class="selectBox">
<div class="select-container">
<select>
<option>ogródek/strych</option>
</select>
<img class="arrow down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="one">
<label for="one"></label>
</span>
<span class="checkboxes__container--text">
<span>ogródek</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="two">
<label for="two"></label>
</span>
<span class="checkboxes__container--text">
<span>strych</span>
</span>
</div>
</div>
</div>
<div>
<div class="selectBox">
<div class="select-container">
<select>
<option>status</option>
</select>
<img class="arrow down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="three">
<label for="three"></label>
</span>
<span class="checkboxes__container--text">
<span>wolne</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="four">
<label for="four"></label>
</span>
<span class="checkboxes__container--text">
<span>rezerwacja</span>
</span>
</div>
</div>
</div>
<div>
<div class="selectBox">
<div class="select-container">
<select>
<option>status</option>
</select>
<img class="arrow down-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="three">
<label for="three"></label>
</span>
<span class="checkboxes__container--text">
<span>wolne</span>
</span>
</div>
<div class="checkboxes__container">
<span class="checkboxes__container--input">
<input type="checkbox" id="four">
<label for="four"></label>
</span>
<span class="checkboxes__container--text">
<span>rezerwacja</span>
</span>
</div>
</div>
</div>
</div>

The issue is happening because all the checkboxes have the same id "checkboxes", so when you are trying to select by id "checkboxes" the first occurence of the html element having id: "checkboxes" is selected.
I have solved it here: https://codepen.io/snehansh/pen/PXvawv
I have resolved your issue, by assigning the checkboxes with same class name
<div class="checkboxes">
and then I am setting a javascript variable based on the column checkbox selected,
<div class="selectBox" onclick="sectionOneClicked(); showCheckboxes(); changeArrow();">
var section = null;
function sectionOneClicked() {
section = 0;
}
and then inside of your function 'showCheckboxes()' I am passing the selected index to the 'checkboxes[]' array
function showCheckboxes() {
var checkboxes = document.getElementsByClassName("checkboxes");
if (!expanded) {
checkboxes[section].style.display = "block";
expanded = true;
} else {
checkboxes[section].style.display = "none";
expanded = false;
}
}

How to use jquery to move a div to the top of a element and the other two to the bottom

Hey I'm making this accordion and when you select an option in the top, one of the three other panels have to show. To accomplish this I would like to move the panel in the DOM to the top of the tree. The other two have to be moved to the bottom however. Right now it just switchs to one of the three but if I select a new one it doesn't update so I'm sure the dom is all mixed up.
HTML
<button class="accordion" id="special_accord">
<h2 class="float-left">2.</h2>
<h2 class="text-center">Model</h2></button>
<div class="panel" id="default_panel">
<label>
<h3 class="text-center">Please select a Device Type above</h3></label>
</div>
<div class="panel" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-model" value="laptop1" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-model" value="laptop2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-model" value="laptop3" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="tablet_panel">
<div id="col1">
<label class="control control--radio">iPad 2
<input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 3
<input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 4
<input type="radio" name="radio-model" value="tablet-ipad4" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Air
<input type="radio" name="radio-model" value="tablet-ipadAir" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini
<input type="radio" name="radio-model" value="tablet-ipadMini" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini 2
<input type="radio" name="radio-model" value="tablet-ipadMini2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Nexus 7
<input type="radio" name="radio-model" value="tablet-nexus7" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Amazon Fire
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Amazon Kindle
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3 & 4
<input type="radio" name="radio-model" value="phone-iphone3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 5, 5c, 5s
<input type="radio" name="radio-model" value="phone-iphone5cs" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6
<input type="radio" name="radio-model" value="phone-iphone6" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6 Plus
<input type="radio" name="radio-model" value="phone-iphone6+" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-model" value="phone-lumia430" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-model" value="phone-galaxys3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Galaxy S4
<input type="radio" name="radio-model" value="phone-galaxys4" />
<div class="control__indicator"></div>
</label>
</div>
</div>
CSS
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 33%;
height: 100%;
}
#col2 {
float: center;
height: 100%;
width: 33%;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 100%;
width: 34%;
margin-left: 20px;
overflow: hidden;
display: table-cell;
}
#price_tally {
float: right;
display: inline-block;
border: 1px solid #6fdd7a;
padding-top: 10px;
border-radius: 2px;
background-color: #6fdd7a;
}
#price_tally hr {
border: 1px solid #ffffff;
margin: 0px;
}
#money_tally {
text-align: center;
font-size: 3em;
padding: 0px;
margin: 0px;
color: #ffffff;
}
#price_tally button {
width: 100%;
height: 100%;
margin: 0px;
padding: 16px;
font-size: 26px;
background-color: #6fdd7a;
color: #ffffff;
border: none;
outline: none;
cursor: pointer;
}
#price_tally button:hover {
background-color: #65c76f;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 2px;
width: 50%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid #6fdd7a;
border-right: 1px solid #6fdd7a;
border-top: 1px solid #6fdd7a;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 46%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
#optional_panel {
border-bottom: 1px solid #6fdd7a;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
div.showing {
padding: 0px 18px;
background-color: #ffffff;
max-height: 600px;
overflow: hidden;
width: 46%;
max-height: 100%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #444;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
var def = $("#special_accord");
var lap = $("#laptop_panel");
var tab = $("#tablet_panel");
var pho = $("#phone_panel");
$("#laptop_button").click(function () {
lap.before().insertAfter(def);
});
$("#tablet_button").click(function () {
tab.before().insertAfter(def);
});
$("#phone_button").click(function () {
pho.before().insertAfter(def);
});

This may not really answer your question. But is this close to your objective?
I am not too sure about your objective here.
$(".accordion").on("click", function(e){
$(".panel").hide();
console.log("selected: ", $(this).attr("data-model"));
var model = $(this).attr("data-model");
if (model) {
$( "#" + model + "_panel").show("slow");
}
else {
$("#default_panel").show("slow");
}
});
// hide all panels
$(".panel").hide();
https://jsfiddle.net/sudarpochong/ncynro4j/

Why events don't work for the HTML I push by jQuery?

Please follow these steps:
Run code snippet below
Click on click here
Click on draw button
Click on start again link
Click on click here, See? nothing happens.
Why? And how can I fix it?
set_container();
$("body").one('click', '#one_to_many', function () {
$(this).html('<form action="demo_form.asp">\
<input type="checkbox" name="graph" value="like" checked> one<br>\
<input type="checkbox" name="graph" value="comment" checked> two<br>\
<input type="checkbox" name="graph" value="friend" checked> three<br>\
<input class="graph_btn" type="button" value="draw">\
</form>');
});
function set_container() {
$(".set_value").html('<div id = "one_to_many" class="draw_graph col-md-8 col-md-offset-2 text-center" style="margin-bottom: 25px;">\
click here\
</div>');
}
$("body").on('click', '.graph_btn', function (e) {
$(this).attr('disabled', 'disabled');
$(this).css({"cursor": "wait", "opacity": ".5"});
$(this).after('<a onclick="set_container();">start again</a>');
});
.draw_graph{
border: 4px double #ccc;
padding: 20px;
font-size: 40px;
color: #777;
}
.draw_graph:hover {
background-color: #f9f9f9;
cursor: pointer;
}
.draw_graph span{
font-size: 13px !important;
display: inline-block;
}
.draw_graph form{
margin: 0 auto;
font-size: 20px;
line-height: 2;
display: table;
text-align: left;
}
.draw_graph input[type=button]{
margin-top: 10px;
}
.draw_graph a {
font-size: 15px;
display: block;
margin-top: 10px;
color: #1e6be5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container thumbnail thumbnail-post col-sm-12 set_value" style="padding: 30px;">
</div>

Remove one use on and use .stopPropagation() to prevent parent clicks please find below snippet
set_container();
$("body").on('click', '#one_to_many', function () {
$(this).html('<form action="demo_form.asp">\
<input type="checkbox" name="graph" value="like" checked> one<br>\
<input type="checkbox" name="graph" value="comment" checked> two<br>\
<input type="checkbox" name="graph" value="friend" checked> three<br>\
<input class="graph_btn" type="button" value="draw">\
</form>');
$("#one_to_many").unbind("click").bind("click");
});
function set_container() {
$(".set_value").html('<div id = "one_to_many" class="draw_graph col-md-8 col-md-offset-2 text-center" style="margin-bottom: 25px;">\
click here\
</div>');
}
$("body").on('click', '.graph_btn', function (e) {
e.stopPropagation();
$(this).attr('disabled', 'disabled');
$(this).css({"cursor": "wait", "opacity": ".5"});
$(this).after('<a onclick="set_container();">start again</a>');
});
$("body").on('click',"form",function(e){
e.stopPropagation();
})
.draw_graph{
border: 4px double #ccc;
padding: 20px;
font-size: 40px;
color: #777;
}
.draw_graph:hover {
background-color: #f9f9f9;
cursor: pointer;
}
.draw_graph span{
font-size: 13px !important;
display: inline-block;
}
.draw_graph form{
margin: 0 auto;
font-size: 20px;
line-height: 2;
display: table;
text-align: left;
}
.draw_graph input[type=button]{
margin-top: 10px;
}
.draw_graph a {
font-size: 15px;
display: block;
margin-top: 10px;
color: #1e6be5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container thumbnail thumbnail-post col-sm-12 set_value" style="padding: 30px;">
</div>

Basically you were clicking on a child element inside a parent element.
I have changed the code and added e.stopPropagation(); in child element click to stop parent click
Changed few things
1 - $("body") to $(document)
2 - added alert() for debugging and testing, you can remove it
3 - changed #one_to_many to .one_to_many
set_container();
$(document).on('click', '.one_to_many', function () {
$(this).html('<form action="demo_form.asp">\
<input type="checkbox" name="graph" value="like" checked> one<br>\
<input type="checkbox" name="graph" value="comment" checked> two<br>\
<input type="checkbox" name="graph" value="friend" checked> three<br>\
<input class="graph_btn" type="button" value="draw">\
</form>');
$(".one_to_many").unbind("click").bind("click");
});
function set_container() {
$(".set_value").html('<div class="one_to_many draw_graph col-md-8 col-md-offset-2 text-center" style="margin-bottom: 25px;">\
click here\
</div>');
}
$(document).on('click', '.graph_btn', function (e) {
e.stopPropagation();
$(this).attr('disabled', 'disabled');
$(this).css({"cursor": "wait", "opacity": ".5"});
$(this).after('<a onclick="set_container();">start again</a>');
});
$(document).on('click',"form",function(e){
e.stopPropagation();
})
.draw_graph{
border: 4px double #ccc;
padding: 20px;
font-size: 40px;
color: #777;
}
.draw_graph:hover {
background-color: #f9f9f9;
cursor: pointer;
}
.draw_graph span{
font-size: 13px !important;
display: inline-block;
}
.draw_graph form{
margin: 0 auto;
font-size: 20px;
line-height: 2;
display: table;
text-align: left;
}
.draw_graph input[type=button]{
margin-top: 10px;
}
.draw_graph a {
font-size: 15px;
display: block;
margin-top: 10px;
color: #1e6be5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container thumbnail thumbnail-post col-sm-12 set_value" style="padding: 30px;">
</div>

CSS checkbox styling not working

I have my checkboxes and I am trying to style it with the following CSS.
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
The checkboxes are inside my form.
This does not work when I click my checkbox. I am new to styling and let me know where the error is.

You have spaces around the name in the for attribute, remove them.
Working demo:
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
/*added this to show the behavior here on SO*/
background-color: #000
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for="id_contract_name">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for="id_is_ceo">
<span></span> CEO?
</label>
</div>

You have to mention id or class in CSS.
And if you want to add css dynamically then you have to use javascript or jquery.
#id_contract_name{
display: none;
border: none !important;
box-shadow: none !important;
}
#id_is_ceo {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<html>
<body>
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
</body>
</html>

Categories

Resources