Question

我编写了一个简单的脚本，允许我使用自定义复选框。它在基于FF，Opera和webkit的浏览器上运行良好，但像往常一样，IE给了我头像。

IE上的行为真的很奇怪，似乎它在每次点击时检查和取消选中随机框。好吧，也许不是，但我真的没有看到任何一致性。

您可以在http://i5.be/EX上查看代码并自行测试。这个例子是用HTML5编写的，并且在旧的XHTML1.0中进行了测试，不幸的是问题是相同的。因此，问题不在于HTML5 doctype。

有关如何解决这个问题的想法吗？

干杯，本杰明

Answer 1

作为起点，我会使用click事件而不是change事件。尝试：

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

Answer 2

这是IE6 onChange事件中的一个错误，它会在复选框失去焦点之前触发（特别是在onBlur事件触发时）。您可以通过单击其中一个框，然后单击其他位置在页面上对其进行测试。

一个修复方法是将整个事件附加到label（最优雅的解决方案）。

或者，您可以自己动手操作，并在单击标签时手动执行复选框的onClick和onBlur事件。这是一个不显眼的解决方案，不需要对现有代码进行任何更改。

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

未经测试，但您明白了这一点：）

Answer 3

仅当您单击两次复选框时，才会触发复选框的change事件。所以，确实使用click事件。顺便说一下，这也适用于单选按钮。

Answer 4

这可以帮到你。我花了几个小时制作它们：

单选按钮：

＆＃13;

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);
      };
    }
  }
};

＆＃13;

/*
* 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;
}

＆＃13;

<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');">

＆＃13;

复选框：

＆＃13;

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';
      }
    };
  }
};

＆＃13;

/*
* 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*/

＆＃13;

<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?">

＆＃13;

自定义复选框

4 个答案:

单选按钮：

复选框：