消失的单选按钮和可点击的标签
Disappearing radio button and clickable labels
我想让单选按钮消失,而不是按钮,单选按钮的标签本身是可点击的,我将更改所选单选按钮的背景颜色。我该怎么做?例如,我有"是"和"否"标签,这些标签是可点击的,根本没有单选按钮。这些只是改变背景的颜色,但显示不需要的单选按钮。
爪哇语
$(document).ready(function(){
var ok = "green";
var notok = "red";
$.each($(":radio"), function(){
if($(this).prop("checked") == false)
{
$(this).parent().css("background", notok);
}
else
{
$(this).parent().css("background", ok );
}
})
$(":radio").click(function(){
$("[name='"+$(this).prop("name")+"']").parent().css("background", notok);
$(this).parent().css("background", ok );
})
})
.HTML
<FORM name="form1">
<div>
<input type="radio" id="yes" name="q"checked="checked"/> Yes
</div>
<div>
<input type="radio" id="no" name="q"/>No
</div>
</FORM>
谢谢
这个实际上看起来很容易。如果您只使用"标签"标签,它将是可点击的。然后,您可以简单地隐藏单选按钮。
<input id="yes" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="yes">Yes </label>
<input id="no" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="no">No</label>
顺便说一句,这是它工作的JSFiddle:http://jsfiddle.net/scGE9/2/
如果我明白你在问什么,我会隐藏单选按钮,然后将单击处理程序附加到更改背景颜色的标签上:
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
这里有一个要演示的jsfiddle。
简而言之,单击标签时,从所有相关标签中删除控制背景颜色的"选定"类,并将其应用于单击的标签。
相关文章:
- JavaScript:如何用变量填充单选按钮值和标签
- 当单选按钮的标签可单击时双击
- 单击切换单选按钮和标签元素
- 可变标签取决于选择的单选按钮
- 根据单选按钮隐藏标签的函数
- Knockout.js中使用的唯一ID;对于“;单选按钮组中的标签属性
- 使用FOR属性从与单选按钮关联的html标签中获取值
- 得到"标签“;标签在Internet Explorer 6中工作(用于单选按钮)
- 消失的单选按钮和可点击的标签
- 隐藏Zend单选按钮和复选框标签在javascript点击处理程序中
- 仅在一个表格行内设置单选按钮标签的样式
- 如何在 JavaScript 或 jquery 中获取所选单选按钮标签的 ID
- Dojo 单选按钮标签未显示
- 如何传递锚点标签中的单选按钮id
- 选择单选按钮时,如何将类添加到标签中
- 根据单选按钮的选择更改标签文本
- Javascript更改单选按钮标签的文本
- Vaidation单选按钮标签
- 单击带有标签的单选按钮
- 如何在加载新页面时启用jquery标签/单选按钮