[英]Select a radio input when the row is clicked
当用户单击行中的任意位置时,我需要选择一个单选输入,并在鼠标经过该行时突出显示该行。 我一直在尝试一些选项,但无法与jquery / javascript分开使用,但是我敢肯定有某种方法可以使其与纯html / css一起使用。
我想要的是类似于此处调查的第一个问题:
http://es.surveymonkey.com/r/?sm=AX63qikOtbq%2bur0kXj1VwA%3d%3d
我知道可以使用label + inputs加上“ tables”或“ display:table-row;”来完成 或宽度,但我只是无法使其工作。 我将不胜感激。
在tr
上使用css可获得悬停效果,例如:
ROW_CLASS:hover{
background-color: COLOR
}
然后在所有tr
上添加带有或不带有jquery中的类的click事件处理程序,例如:
$("tr").click(function() {
$(this).find("input:radio:first").prop("checked", true).trigger("click");
});
经过数小时的阅读和测试,我设法解决了这一问题。 在这里,您甚至可以兼容IE8 +,适用于输入广播和复选框。 您可以根据需要更改宽度和颜色。 CSS:
.div-table{
display:table;
width:100%;
}
.div-table-row{
display: table-row;
width: auto;
clear:both;
}
.div-table-row:hover{
background-color: #ecf0f1;
}
.div-table-col>input{
float:left;/*fix for buggy browsers*/
display:table-column;
width: 6%;
outline: none !important;
}
.div-table-col>label{
float:left;/*fix for buggy browsers*/
display:table-column;
width: 94%;
}
.div-table-col>input:checked + label{
background-color: #ecf0f1;
}
HTML看起来像这样(根据需要添加任意行):
<form action="" class="div-table">
<div class="div-table-row">
<div class="div-table-col">
<input type="radio" name="nametest" id="t1" value="1">
<label for="t1"> Blablabla</label>
</div>
</div>
<div class="div-table-row">
<div class="div-table-col">
<input type="radio" name="nametest" id="t2" value="2">
<label for="t2"> Blablabla Blablabla Blablabla Blablabla</label>
</div>
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.