CSS checkbox without input tag onclick , pure JS

Question

I want to make a functional CSS checkbox without using html <input> tag, but struggling on doing it. Can someone check where I went wrong ?

var cbElement = document.getElementsByClassName("checkbox1");

cbElement.addEventListener("click", function() {
  var checkbox = document.getElementsByClassName("check");

  if (checkbox.style.visibility == "hidden") {
    document.getElementByClassName("check").style.visibility = "visible";
  } else if (checkbox.style.visibility == "visible") {
    document.getElementsByClassName("check").style.visibility = "hidden";
  }
});

.checkbox1 {
  border: 1px solid black;
  height: 10px;
  width: 10px;
  display: inline-block;
}

.check {
  visibility: hidden;
  color: black; 
}

<span class="checkbox1">
  <i class="check"></i>
</span>

<span class="checkbox1">
  <i class="check"></i>
</span>

Why do you want to take input from the user without a form and a control (ie. input)? — Esko
– Esko, Commented Dec 2, 2016 at 10:33
You can not add event listeners to HTML collections, you must target elements: stackoverflow.com/questions/27834226/… — sinisake
– sinisake, Commented Dec 2, 2016 at 10:44
@Esko , There is no real reason , i'm just learning and trying to do different things — Bongskie
– Bongskie, Commented Dec 2, 2016 at 10:59

kukkuz · Accepted Answer · 2016-12-02 10:51:44Z

Here is a pure JS solution - some pointers:

getElementsByClassName return an HTMLElement list
Toggling a class name is easier than to edit the styles
The check element must be given a background and not color to get the checked feel.

See demo below:

var cbElements = document.getElementsByClassName("checkbox1");

for (var i = 0; i < cbElements.length; ++i) {
  cbElements[i].addEventListener("click", function() {
    this.getElementsByClassName("check")[0].classList.toggle('active');
  });
}

.checkbox1 {
  border: 1px solid black;
  height: 10px;
  width: 10px;
  display: inline-block;
  cursor:pointer;
}
.check {
  visibility: hidden;
  background: black;
  display: block;
  height: 100%;
}
.active {
  visibility: visible;
}

<span class="checkbox1">
    <i class="check">&nbsp;</i>
</span>

<span class="checkbox1">
    <i class="check">&nbsp;</i>
</span>

Dmytro Vyprichenko · Accepted Answer · 2016-12-02 12:04:36Z

OOP-style with a Checkbox class. You can store references to a Checkbox instances to easily access their "checked" properties in your code. Also "checked" property can be defined with a getter-setter, to make it possible to render a checkbox on property change.

function Checkbox(elem) {
  this.elem = elem;
  this.checked = elem.dataset.checked;
  
  // Extend your component:
  // this.name = ...
  // this.value = ...
  // this.onchange = ...

  elem.addEventListener('click', e => {
    this.checked = !this.checked;
    this.render();
  });
}

Checkbox.prototype.render = function() {
  this.elem.setAttribute('data-checked', this.checked);
}

function initCheckboxes(elems) {
  for (let i = 0; i < elems.length; i++) {
    new Checkbox(elems[i]);
  }
}

initCheckboxes(document.querySelectorAll('.checkbox'));

.checkbox {
  position: relative;
  display: inline-block;
  height: 15px;
  width: 15px;
  border: 1px solid;
  cursor: pointer;
}
.checkbox:after {
  position: absolute;
  width: 100%;
  line-height: 100%;
  text-align: center;
}
.checkbox[data-checked="true"]:after {
  content: "✓";
}

<span class="checkbox"></span>
<span class="checkbox" data-checked="true"></span>

Tushar Kshirsagar · Accepted Answer · 2016-12-02 10:46:58Z

1

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<style>
.checkbox{
    border: 1px solid black;
    height: 10px;
    width: 10px;
    display: inline-block;
}
.checked{
    background:red;
}
</style>

<span class="checkbox" id="chk_1">
    <i class="checked"></i>
</span>

<span class="checkbox" id="chk_2">
    <i class="check"></i>
</span>

<script>

var cbElement = $(".checkbox");

$(cbElement).click(function(){
    var currentCb = $(this).attr('id')
    if($("#"+currentCb).hasClass("checked")){
        $("#"+currentCb).removeClass("checked");
    }else {
        $("#"+currentCb).addClass("checked");
    }
});

</script>

answered Dec 2, 2016 at 10:46

Tushar Kshirsagar

3032 silver badges8 bronze badges

5 Comments

roberrrt-s Over a year ago

OP hasn't used the jQuery tag, why do you assume he wishes to use this?

Bongskie Over a year ago

As Roberrt wrote i want it without jQuery

Tushar Kshirsagar Over a year ago

Because achieving this by Plain JS is like reinventing Wheel again !! Isn't it ??

Bongskie Over a year ago

@TusharKshirsagar , thank you for your time :) but i find jquery usefull for people who already knows how plain JS works. That's why i want to do it first the normal way.

Tushar Kshirsagar Over a year ago

That's absolutely correct approach of learning JS, one must learn first Plain JS then go for Jquery like stuffs. Happy coding !!

Collectives™ on Stack Overflow

CSS checkbox without input tag onclick , pure JS

3 Answers 3

Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Linked

Related