单击该行时选择一个单选输入答案

【问题标题】：Select a radio input when the row is clicked单击该行时选择一个单选输入
【发布时间】：2014-11-04 22:31:11
【问题描述】：

当用户单击行中的任意位置时，我需要选择一个单选输入，并在鼠标穿过该行时突出显示该行。我一直在玩弄一些选项，但除了那些使用 jquery/javascript 之外无法得到任何东西，但我确信有一些方法可以让它与普通的 html/css 一起使用。
我想要的类似于这里调查的第一个问题：
http://es.surveymonkey.com/r/?sm=AX63qikOtbq%2bur0kXj1VwA%3d%3d
我知道可以使用标签+输入加上“表格”或“显示：表格行”来完成。或宽度，但我只是无法使其工作。如有任何帮助，我将不胜感激。

【问题讨论】：

标签： javascript html css input row

【解决方案1】：

在 tr 上使用 css 以获得悬停效果，例如：

ROW_CLASS:hover{
    background-color: COLOR
}

然后在所有 tr 上添加一个点击事件处理程序，无论是否在 jquery 中都有一个类，例如：

$("tr").click(function() {
    $(this).find("input:radio:first").prop("checked", true).trigger("click");
});

【讨论】：

正如我所说“我一直在玩弄一些选项，但除了那些使用 jquery/javascript 的选项之外，我无法得到任何东西，但我确信有一些方法可以使它与普通的 html/css 一起使用"。
你不能用纯 html/css 做你所要求的。 CSS 是用于样式的，它实际上并没有能力做很多事情。 HTML 用于您网站的“结构”，它实际上并没有能力做很多事情。您可以在我的回答中使用:hover 效果来获得您想要的所需结果之一，但至于单击表格行上的复选框，CSS 和 HTML 不是编程语言，它们没有逻辑。您将不得不使用 javascript/jQuery 来执行此操作。对不起:(
我会自动回答，因为我已经设法用普通的 html+css 完成了...看来您不知道这些语言的能力。
我只是想补充一点，HTML+CSS比javascript效率更高，比Jquery效率更高。问题是它不像 Jquery 那样直截了当。
您必须先编写一个像 facebook 这样的大型网站，然后才能注意到与效率相关的任何事情。我很高兴您能够使用 html/css 回答您的问题，但您本可以为自己节省数小时的时间。不过还是要向你致敬！

【解决方案2】：

经过数小时的阅读和测试，我设法解决了这个问题。在这里，您甚至可以兼容 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>

【讨论】：