Custom Checkboxes

by sundaramkumar

HTML

<h1>Custom Checkboxes</h1>
<label class="chkContainer">&#160;
  <input name="numbers[]" value="1" type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="chkContainer">&#160;
  <input name="numbers[]" value="2" type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="chkContainer">Three
  <input name="numbers[]" value="3" type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="chkContainer">Four
  <input name="numbers[]" value="4" type="checkbox">
  <span class="checkmark"></span>
</label>
<button onClick="getIds()">View selected</button>
<p id="demo"></p>

CSS

#demo{
border:1px red solid;
height:20px;
}
/* The container */
.chkContainer {
  display: block;
  position: relative;
  padding-left: 22px;
  margin-bottom: 3px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.chkContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border:1px solid #cccccc;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.chkContainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkContainer input:checked ~ .checkmark {
  background-color: #28d4e7;
  border:1px solid #1fb8c9;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.chkContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.chkContainer .checkmark:after {
  left: 5px;
  top: 2px;
  width: 3px;
  height: 7px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

JavaScript

var selected = [];
function getIds(){
	selected = [];
  var checkboxes = document.getElementsByName("numbers[]")
  for(var i=0; i< checkboxes.length; i++){
 	if (checkboxes[i].checked) {
        selected.push(checkboxes[i].value);
    }
  }
  /* alert(selected) */
  document.getElementById("demo").innerHTML = selected.join(", ");
}