3

我认为我想要实现的目标可以以更简单的方式完成。但是我几乎没有 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>
4

3 回答 3

8

使用 CSS 彻底改变复选框的外观是不可能的。

但是，您可以做的是将标签元素设置为足以使其看起来像按钮的样式。由于标签元素的性质，单击它将切换复选框的状态，从而保持您的功能不变。

这是如何做到的

标记

<li>
    <label for="kml-red-check">I am a button!</label>
    <input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>

请注意，我已将onclick处理程序更改为，onchange因为现在无法单击复选框本身。当您单击标签时，它的值会发生变化

造型

label[for="kml-red-check"]{
   //Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
    display:none;
}
于 2013-11-12T11:29:33.483 回答
6 

.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 在 IE 中不起作用

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

function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}
于 2013-11-12T11:43:10.173 回答
0 
<label>
  <input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
  <span>this is button add some css to lokking like a button</span>
</label>

这将像按钮一样工作，如果您不想显示复选框，请使用此

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
  <span>this is button add some css to lokking like a button</span>
</label>

在这里查看https://jsfiddle.net/h0ntpwqk/2/

于 2017-08-01T02:41:54.007 回答