Question

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

网页上的顶级菜单，其中的按钮和复选框在视觉上看起来都相同
我希望复选框看起来像按钮，例如没有复选框只有标签。
我希望复选框仍然保留其功能作为一个复选框，给出它正在调用的JS代码
我通过按钮和复选框调用JS代码的方式是正确还是太复杂？

<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

使用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;
}

Answer 2

HTML：

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

的CSS：

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

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

Answer 3

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

使复选框看起来像一个按钮CSS

3 个答案: