html:html 网页中 如何实现多选框或单选框,点击字就能选中,而不是非要点小按钮。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html:html 网页中 如何实现多选框或单选框,点击字就能选中,而不是非要点小按钮。相关的知识,希望对你有一定的参考价值。
比如 单选框 男、女 能够点男、女两个字就能选中
参考技术A 不好意思,看错了题目,特意来改过..点击文字也可以选中单选框
<br>
<input type="radio" name="regtype" value="A02" id="A02">
<label for="A02"> 点击我(男)</label><br>
<br>
<input type="radio" name="regtype1" value="A03" id="A03">
<label for="A03"> 点击我(女)</label><br>
***********************************************************
鼠标移动到文本框内自动选中全部
<input type="text" name="key" size="12" value="关键字" onFocus=this.select() onMouseOver=this.focus() class="line">
我测试通过的.
--------------------------
我喜欢回答我所知道的.本回答被提问者和网友采纳
Twitter Bootstrap 单选框/复选框 - 如何放置 glyphicon
【中文标题】Twitter Bootstrap 单选框/复选框 - 如何放置 glyphicon【英文标题】:Twitter Bootstrap radio/checkbox - how to put glyphicon 【发布时间】:2014-07-10 17:14:27 【问题描述】:使用 TB,是否可以设置单选框或复选框的样式,使其显示字形而不是单选框或复选框的默认样式?我想用glyphicon glyphicon-star
表示未选中,然后glyphicon glyphicon-star-empty
表示已选中。
【问题讨论】:
没有“官方”BS 方法可以做到这一点,但您可以使用 JS 隐藏复选框,替换为另一个元素并将字形图标状态附加到该元素(在后台切换复选框)。 glyphicon glyphicon-star-empty 表示未选中,然后 glyphicon glyphicon-star-empty 表示已选中?是同一个图标吗? @Crystal - 感谢您注意到错误。我已经修好了。 【参考方案1】:如果没有 javascript,您可以修改样式...在我看来这是一种 hack,但它很有趣,因为我意识到 boostrap 使用图标字体#newb。
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
.glyphicon:before
visibility: visible;
.glyphicon.glyphicon-star-empty:checked:before
content: "\e006";
input[type=checkbox].glyphicon
visibility: hidden;
试试看HERE
【讨论】:
你能检查一下你的小提琴吗?它似乎对我不起作用。谢谢。 @***Newbie 我查过了;它有效,但是当你检查它时会发生什么? @***Newbie 我更新了它以使用你想要的图标。::before
对输入元素无效。这适用于 Chrome,但不适用于 IE、Firefox。更多解释here【参考方案2】:
仅针对那些遇到同样问题并来自 Google 的人(我没有找到任何方便的答案)。
我修改了类似的东西,并在当前的 Chrome、Firefox 和 IE 中对其进行了测试。使用此方法,您还可以将所需的所有其他内容用作复选框。只需将类“选中”和“未选中”即可。
对每个复选框都这样做:
<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
<span class='glyphicon glyphicon-unchecked unchecked'></span>
<span class='glyphicon glyphicon-check checked'></span>
Checkbox 1
</label>
并添加到您的 CSS:
input[type='checkbox'].icon-checkboxdisplay:none
input[type='checkbox'].icon-checkbox+label .uncheckeddisplay:inline
input[type='checkbox'].icon-checkbox+label .checkeddisplay:none
input[type='checkbox']:checked.icon-checkboxdisplay:none
input[type='checkbox']:checked.icon-checkbox+label .uncheckeddisplay:none
input[type='checkbox']:checked.icon-checkbox+label .checkeddisplay:inline
【讨论】:
这对我帮助很大!我几乎把它粘贴进去了,它起作用了!【参考方案3】:在官方网站上,javascript 部分有将复选框和单选按钮设置为按钮组的样式示例。它在按钮部分下方here。
您可以放置您的字形图标,而不是在显示“选项 1”的按钮内放置文本。如果你只想要一个复选框,我想你可以去掉按钮组,只用一个按钮。
要移除按钮外观并仅显示您的图标,请使用“btn-link”类。
我自己没有尝试过,但我认为它没有理由不起作用。
【讨论】:
【参考方案4】:这是一个纯粹的角度解决方案,用于在字形图标之间切换以有条件地在页面上显示内容。我发现 CSS 解决方案在 IE 中失败。
这不仅仅是您的问题,但我认为在屏幕上切换某些内容很有用。
<p ng-init="toggle = false" ng-click="toggle = !toggle" title="@Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'[toggle]"></p>
<div ng-show="toggle">
//what you want to show here
</div>
【讨论】:
以上是关于html:html 网页中 如何实现多选框或单选框,点击字就能选中,而不是非要点小按钮。的主要内容,如果未能解决你的问题,请参考以下文章