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 网页中 如何实现多选框或单选框,点击字就能选中,而不是非要点小按钮。的主要内容,如果未能解决你的问题,请参考以下文章

如何知道 Dart 中是不是选中了复选框或单选按钮?

定位神器

MFC如何给单选框或复选框初始化时就被选中

bootstrap学习总结-05 常用标签3

jquery multiSelect 怎么清空选择

用于多个动态创建的复选框或单选组的 jquery 验证器