php - Div 单击与单选按钮相同？

Question

有没有办法让 div 上的单击事件与表单环境中的单选按钮行为相同？我只想让下面的 div 提交值，单选按钮很难看

代码的输出如下:

<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date">8</input></li><li id="li-2011-06-09" class=" "><input id="radio-2011-06-09" value="2011-06-09" type="radio" name="radio_date">9</input></li><li id="li-2011-06-10" class=" "><input id="radio-2011-06-10" value="2011-06-10" type="radio" name="radio_date">10</input></li><li id="li-2011-06-11" class=" end "><input id="radio-2011-06-11" value="2011-06-11" type="radio" name="radio_date">11</input></li><li id="li-2011-06-12" class=" start "><input id="radio-2011-06-12" value="2011-06-12" type="radio" name="radio_date">12</input></li><li id="li-2011-06-13" class=" "><input id="radio-2011-06-13" value="2011-06-13" type="radio" name="radio_date">13</input></li><li id="li-2011-06-14" class=" "><input id="radio-2011-06-14" value="2011-06-14" type="radio" name="radio_date">14</input></li><li id="li-2011-06-15" class=" "><input id="radio-2011-06-15" value="2011-06-15" type="radio" name="radio_date">15</input></li><li id="li-2011-06-16" class=" "><input id="radio-2011-06-16" value="2011-06-16" type="radio" name="radio_date">16</input></li><li id="li-2011-06-17" class=" "><input id="radio-2011-06-17" value="2011-06-17" type="radio" name="radio_date">17</input></li><li id="li-2011-06-18" class=" end "><input id="radio-2011-06-18" value="2011-06-18" type="radio" name="radio_date">18</input></li><li id="li-2011-06-19" class=" start "><input id="radio-2011-06-19" value="2011-06-19" type="radio" name="radio_date">19</input></li><li id="li-2011-06-20" class=" "><input id="radio-2011-06-20" value="2011-06-20" type="radio" name="radio_date">20</input></li><li id="li-2011-06-21" class=" "><input id="radio-2011-06-21" value="2011-06-21" type="radio" name="radio_date">21</input></li><li id="li-2011-06-22" class=" "><input id="radio-2011-06-22" value="2011-06-22" type="radio" name="radio_date">22</input></li><li id="li-2011-06-23" class=" "><input id="radio-2011-06-23" value="2011-06-23" type="radio" name="radio_date">23</input></li><li id="li-2011-06-24" class=" "><input id="radio-2011-06-24" value="2011-06-24" type="radio" name="radio_date">24</input></li><li id="li-2011-06-25" class=" end "><input id="radio-2011-06-25" value="2011-06-25" type="radio" name="radio_date">25</input></li><li id="li-2011-06-26" class=" start "><input id="radio-2011-06-26" value="2011-06-26" type="radio" name="radio_date">26</input></li><li id="li-2011-06-27" class=" "><input id="radio-2011-06-27" value="2011-06-27" type="radio" name="radio_date">27</input></li><li id="li-2011-06-28" class=" "><input id="radio-2011-06-28" value="2011-06-28" type="radio" name="radio_date">28</input></li><li id="li-2011-06-29" class=" "><input id="radio-2011-06-29" value="2011-06-29" type="radio" name="radio_date">29</input></li><li id="li-2011-06-30" class=" "><input id="radio-2011-06-30" value="2011-06-30" type="radio" name="radio_date">30</input></li><li id="li-" class=" inactive"></li><li id="li-" class=" end inactive"></li></ul><div class="clear"></div></div>    

Answer 1

这可以在没有 JavaScript 的情况下完成，但你必须放弃 div。

您可以使用 <label>标签而不是 <div>并使用 CSS 隐藏单选按钮。

例如:

<input type="radio" id="foo" /><label for="foo">Bar</label>

在 CSS 中:

input[type=radio] {
   display:none;
}

请注意 <label>标签默认是内联的，并且 <div>是 block 级元素，因此您可能需要稍微移动一下 CSS。