單擊行時選擇收音機輸入

當用戶單擊行中的任意位置時，需要選擇一個收音機輸入，並在鼠標滑過時突出顯示該行。我一直玩弄一些選項，但不能得到任何東西與jquery/javascript，除了那些工作，但我敢肯定有一些方法，使其與純HTML/CSS的工作。
我要的是一樣的東西在這裏調查的第一個問題：
http://es.surveymonkey.com/r/?sm=AX63qikOtbq%2bur0kXj1VwA%3d%3d
我知道這是可以做到與標籤+輸入加「表」或玩弄「顯示：表列;」或寬度，但我只是無法使其工作。我會感謝任何幫助。您tr單擊行時選擇收音機輸入

來源

2014-11-04 danielmg

我在幾個小時的閱讀和測試之後設法解決這個問題。在這裏你甚至可以兼容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>

來源

2014-11-05 23:50:30 danielmg

使用CSS來得到像懸停效果：

ROW_CLASS:hover{ 
    background-color: COLOR 
}

，然後在所有tr使用或不使用類的jQuery添加一個單擊事件處理程序，如：

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

來源

2014-11-04 22:46:40

正如我說：「我一直在玩弄一些選項，但不能得到任何工作分開那些與jquery/javascript，但我確定有一些方法可以使它與純HTML/CSS「。 – danielmg 2014-11-05 12:11:38

你不能在純html/css中做你所要求的。 CSS是用於造型的，它沒有實力去做很多事情。 HTML是針對你的網站的「結構」，它沒有實力去做很多事情。您可以在我的答案中使用'：hover'效果以獲得您想要的結果之一，但對於單擊表格行中的複選框，CSS和HTML不是編程語言，並且沒有邏輯。你將不得不使用JavaScript/jQuery來做到這一點。對不起:( – 2014-11-05 14:41:20

我要自動回答，因爲我已經設法使用純HTML + CSS ...似乎你不知道這些語言能夠。 – danielmg 2014-11-05 23:39:13

單擊行時選擇收音機輸入

回答

相關問題