javascript - 使复选框看起来像按钮 CSS

Question

我认为我想要实现的目标可以用更简单的方式完成。但是，我没有 JS 经验，也没有 CSS 方面的经验。所以我正在使用预构建的 CSS 和 JS 代码并对其进行微妙的修改。所以我将解释我的最终目标，看看我目前拥有的是否可以接受。

1. 网页上的顶部菜单，包含视觉上看起来相同的按钮和复选框
2. 我希望复选框看起来像按钮，例如没有复选框只有标签。
3. 我希望复选框在给定其调用的 JS 代码的情况下仍保留其作为复选框的功能
4. 我通过按钮和复选框调用 JS 代码的方式是否正确或过于复杂？

JSFiddle

---

<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>  
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>

Answer 1

.hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

input[type=checkbox]+label {
  color: #ccc;
  font-style: italic;
}

input[type=checkbox]:checked+label {
  color: #f00;
  font-style: normal;
}

<input type="checkbox" class="hidden" name="cb" id="cb">
<label for="cb">text</label>

http://css-tricks.com/almanac/selectors/c/checked/

但不适用于 lt IE9。

编辑:按照您的标记，它应该是这样的:

<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>

然后检查复选框是否在您的函数中被选中。 onchange / onclick in a checkbox doesn't work in IE

再次编辑:更改了 NAME 属性，这样您就不会再遇到问题了。并为 IE8 中无响应但最终需要的 onchange 功能添加了一些解决方法。最终，您应该向您的函数添加一个计时器，而不是内联。

function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}