div单击与单选按钮相同？答案

【问题标题】：Div click same as radio button?div单击与单选按钮相同？
【发布时间】：2011-09-15 02:52:10
【问题描述】：

有没有办法让 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>

【问题讨论】：

您希望在单击 div 时选择单选，还是希望<div> 像单选按钮一样被选中并发送值？只是想澄清一下

标签： php jquery forms

【解决方案1】：

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

您可以使用<label> 标签代替<div>，并使用CSS 隐藏单选按钮。

例如：

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

在 CSS 中：

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

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

【讨论】：

+1 非常足智多谋！我一定会记住这一点。我很欣赏你完全避免使用 JavaScript 的方式。
这是一个有趣的解决方案。有没有办法向用户指示选择了哪个日期？
@kinakuta 这是一个非常好的问题。见：stackoverflow.com/questions/1431726/…

【解决方案2】：

您可以隐藏单选按钮，如果单击 div，则在隐藏的单选按钮上触发单击事件。当然，您需要自己处理显示选择的日期。

我准备了一个小演示： http://jsfiddle.net/roberkules/4xK86/

【讨论】：

【解决方案3】：

只需关闭单选按钮的可见性并将点击事件绑定到每个 div/tds/将（现在不可见）单选按钮设置为“已选中”的任何内容。您需要向用户提供某种可见的指示，表明日期已被选中，并且您需要添加逻辑以“取消选择”div/td/无论何时选中另一个。

【讨论】：

【解决方案4】：

关于这些方面的事情呢：

$('div', '#calendar')
  .find(':radio')
  .attr('checked', 'checked')
  .trigger('change');

其中“#calendar”是日历的 ID 值。这假设单选按钮位于相关的 div 内。 trigger('change') 将调用已绑定到该单选按钮的任何事件。

您还可以使用标签并将日期编号变成标签。可以使用 FOR 属性将标签链接到表单输入。输入需要一个匹配的 ID 属性。

【讨论】：

【解决方案5】：

由于您的情况，您只能选择一个日期。我会做以下事情

创建隐藏的输入 - 你可以称之为selectedItem。
删除所有这些单选按钮，只使用 div。对所有 div 使用相同的类。
编写将绑定所有 div（基于该类）以侦听单击事件的 jQuery。当该事件发生时，更新该隐藏输入字段的值。

希望对您有所帮助。

【讨论】：

【解决方案6】：

基本上，您将不得不添加一个隐藏字段来保存日期，但只要您能获得被点击的div 的日期，您就是黄金。您只需要将值推送到 onclick 处理程序上的隐藏字段。

<input type="hidden" name="date" id="date"/>
<!-- Begin Calendar -->
    <!-- Begin Calendar Cell -->
        <div class="calendarCell">
            <span class="date">#</span>
        </div>
    <!-- End Calendar Cell -->
<!-- End Calendar -->

<script type="text/javascript">
    $('.calendarCell').each(function(){
        $(this).click(function(){
            $('#date').val($(this).find('.date').html());
        });
    });
</script>

【讨论】：