Php Div单击是否与单选按钮相同?
有没有一种方法可以使div上的单击事件与表单环境中的单选按钮的行为相同?我只想让下面的div提交值,单选按钮很难看 代码的输出方式如下:Php Div单击是否与单选按钮相同?,php,jquery,forms,Php,Jquery,Forms,有没有一种方法可以使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
<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>
89 10 11 12=“li-2011-06-17”class=“”>17 18 19 20“class=”end“>25 26 27 28 29
您可以隐藏单选按钮,如果单击了某个div,则在隐藏的单选按钮上触发单击事件。当然,您需要自己处理显示选择的日期
我准备了一个小演示:
沿着这些思路的东西怎么样:
$('div', '#calendar')
.find(':radio')
.attr('checked', 'checked')
.trigger('change');
其中“#calendar”是日历的ID值。这假设单选按钮位于相关div内。触发器(“更改”)将调用已绑定到该单选按钮的任何事件
您还可以使用标签并将日数设置为标签。可以使用FOR属性将标签链接到表单输入。输入将需要一个匹配的ID属性。只需关闭单选按钮可见性,并将一个单击事件绑定到每个div/tds/任何将(现在不可见)单选按钮设置为“选中”的内容。您需要向用户提供某种可见的指示,表明选择了日期,并且需要添加逻辑,以便在选中另一个日期时“取消选择”div/td/where 因为您在您的案例中只能选择一个日期。我会做下面的事情
selectedItem
李>
希望这能有所帮助。基本上,你必须添加一个隐藏字段来保存日期,但只要你能在点击的
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>
#
$('.calendarCell')。每个(函数(){
$(此)。单击(函数(){
$('.#date').val($(this.find('.date').html());
});
});
这完全可以在没有Javascript的情况下完成,但您必须放弃div
您可以使用
标记代替
,并使用CSS隐藏单选按钮
例如:
<input type="radio" id="foo" /><label for="foo">Bar</label>
请注意,默认情况下,
标记是内联的,
是块级元素,因此您可能需要在CSS中移动一点。您希望在div单击时选择收音机,还是希望有一个
像单选按钮一样进行选择并发送值?只是想澄清+1非常足智多谋!我一定会记住这一点。我很欣赏你完全避免使用JavaScript的方式。这是一个有趣的解决方案。有没有办法向用户表明选择了哪个日期?@kinakuta这是一个很好的问题。见: