Custom checkboxes

I've coded a little simple script that a开发者_如何学编程llows me to use custom checkboxes. It works fine on FF, Opera and webkit based browsers but, as usual, IE is giving me headhaches.

The behaviour on IE is really strange, it seems like it's checking and unchecking random boxes on each click. Well, maybe it's not but I really don't see any consistency.

You can view the code and test it by yourself on http://i5.be/EX. The example is written in HTML5 and having also tested it in good old XHTML1.0, the issue is unfortunately the same. Thus, the problem is not due to the HTML5 doctype.

Any idea on how to fix this?

Cheers, Benjamin

As a starting point, I would use the click event instead of the change event. Try:

  $("body")
    .addClass(settings.bodyJsClass)
    .find(":checkbox")
    .filter("." + settings.customClass)
    .each(styleCheckStatus)
    .click(styleCheckStatus);

The change event for checkboxes is only fired when you click the checkbox twice. So, indeed use the click event. This also applies on radio buttons by the way.

It's a bug in the IE6 onChange event where it doesn't fire until the checkbox loses focus (specifically, when the onBlur event fires). You can test it on your page by clicking one of the boxes, then clicking somewhere else.

One fix would be to attach the entire event to the label instead (Most elegant solution).

Alternatively, you could take it into your own hands and execute the onClick and onBlur events of the checkbox manually when a label is clicked. This is an unobstrusive solution and shouldn't require any changes to your existing code.

  $("label").click(function(e) {
    e.preventDefault();
    $("#" + $(this).attr("for")).click().blur();
  });

Not tested but you get the idea :)

Here is something to help you. I spent a couple hours making them:

Radio buttons:

window.onload = function() {
  var radioButtonGroups = document.getElementsByClassName('radioGroupContainer');
  for (var i = 0; i != radioButtonGroups.length; i++) {
    var radioButtons = radioButtonGroups[i].getElementsByClassName('radioButtonContainer');
    for (var i = 0; i != radioButtons.length; i++) {
      radioButtons[i].onclick = function() {
        var value = this.children[0].getAttribute('name');
        for (var i = 0; i != radioButtons.length; i++) {
          radioButtons[i].children[0].setAttribute('class', 'radioButtonDot');
        }
        this.children[0].setAttribute('class', 'radioButtonDotActive');
        this.parentNode.setAttribute('name', value);
      };
    }
  }
};

/*
* Created by William Green.
* Questions or comments? Email william.green@protonmail.com
* I would appreciate credit for this code if you use it; but it is not required.
* Last updated July 26, 2015
* Created July 26, 2015
*
*/

.radioButtonContainer {
  background-color: #eee;
  padding: 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: table;
  margin-top: 5px;
  margin-bottom: 5px;
}
.radioButtonContainer .radioButtonDot {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.radioButtonContainer .radioButtonDotActive {
  width: 16px;
  height: 16px;
  background-color: #1396DE;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.radioButtonContainer .radioButtonLabel {
  background-color: transparent;
  display: inline-block;
  vertidal-align: middle;
  border: 0;
}

<div class="radioGroupContainer" id="radioChoicesOne">
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionOne"></div>
    <input type="button" class="radioButtonLabel" value="Option One">
  </div>
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionTwo"></div>
    <input type="button" class="radioButtonLabel" value="Option Two">
  </div>
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionThree"></div>
    <input type="button" class="radioButtonLabel" value="Option Three">
  </div>
</div>

<div id="radioButtonGroupOneValue"></div>
<input type="button" value="Get radio button value..." onclick="document.getElementById('radioButtonGroupOneValue').innerHTML = document.getElementById('radioChoicesOne').getAttribute('name');">

Checkboxes:

window.onload = function() {
  var checkboxes = document.getElementsByClassName('checkbox');
  for (var i = 0; i != checkboxes.length; i++) {
    if (checkboxes[i].hasAttribute('name') == false) {
      checkboxes[i].setAttribute('name', 'notChecked');
    } else {
      if (checkboxes[i].getAttribute('name') == 'checked') {
        checkboxes[i].setAttribute('name', 'checked');
        checkboxes[i].children[0].className = 'checkboxDotActive';
      }
    }

    checkboxes[i].onclick = function() {
      if (this.getAttribute('name') == 'checked') {
        this.setAttribute('name', 'notChecked');
        this.children[0].className = 'checkboxDot';
      } else {
        this.setAttribute('name', 'checked');
        this.children[0].className = 'checkboxDotActive';
      }
    };
  }
};

/*
* Questions or comments? Please email william.green@protonmail.com
* Credit for this project goes to William Green (me).
* Created July 25, 2015
* Last updated July 25, 2015
* I would like appropriate credit for this code, although it is not required.
*
* Thank you for looking, hope you find it useful.
* Please come back, since I may be adding more features to the code to allow for advanced functionality.
*
* PLEASE NOTE THAT THE 'checkboxDot' DIV MUST COME BEFORE ANY OTHER INNER MARKUP.
* IT MUST COME IMMEDIATELY AFTER THE PARENT DIV! IT WILL NOT WORK OTHERWISE!!!
*
* Thank you for showing interest in this code!
*/

/*IMPORTANT STYLES... THE STYLES LATER ARE NOT DIRECTLY RELATED THE THE CHECKBOXES*/

.checkbox {
  background-color: #eee;
  border-radius: 3px;
  padding: 5px;
  display: table;
}
.checkbox input {
  outline: none;
  border: 0;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
}
.checkbox .checkboxDot {
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.checkbox .checkboxDotActive {
  background-color: #01A1DB;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
/*END IMPORTANT STYLES*/

/*START IRRELEVANT STYLES*/

.valueButton {
  margin-top: 10px;
}
/*END IRRELEVANT STYLES*/

<h1>Javascript, html, and css checkboes -- best browser support ever!</h1>


<h3>Normal checkbox</h3>

<div id="checkboxOne" class="checkbox">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 1">
</div>
<div id="checkboxOneStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById('checkboxOneStatus').innerHTML = document.getElementById('checkboxOne').getAttribute('name');" value="Is it checked?">

<h3>Checked by default</h3> 
<div id="checkboxTwo" class="checkbox" name="checked">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 2">
</div>
<div id="checkboxTwoStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById('checkboxTwoStatus').innerHTML = document.getElementById('checkboxTwo').getAttribute('name');" value="Is it checked?">