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> - уровень блокаэлемент, поэтому вам может понадобиться немного передвигаться по CSS.

Answer 2

Вы можете скрыть переключатели, и если щелкнуть элемент div, вызвать событие щелчка на скрытом переключателе.Конечно, вам нужно обработать отображение выбранной даты самостоятельно.

Я подготовил небольшую демонстрацию: http://jsfiddle.net/roberkules/4xK86/

Answer 3

Просто отключите видимость переключателя и привяжите событие щелчка к каждому из элементов divs / tds / независимо от того, что устанавливает (теперь невидимую) переключатель в положение «флажок». Вы захотите дать пользователю какое-то видимое указание на то, что дата выбрана, и вам нужно будет добавить логику, которая «отменяет выбор» div / td / что угодно, когда проверяется другая.

Answer 4

В основном вам нужно будет добавить скрытое поле, в котором будет храниться дата, но до тех пор, пока вы можете получить дату 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>

Answer 5

Так как в вашем случае вы можете выбрать только одну дату. Я бы сделал следующее

1. Создать скрытый ввод - вы можете назвать его selectedItem.
2. Удалите все эти переключатели и просто используйте div. Используйте один и тот же класс для всех div.
3. Напишите jQuery, который связывал бы все div (на основе этого класса) для прослушивания события click. Когда это событие происходит, обновите значение этого скрытого поля ввода.

Надеюсь, это поможет.

Answer 6

Что-то вроде этого:

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

Где '#calendar' - это значение идентификатора календаря.Это предполагает, что переключатель находится внутри рассматриваемого div.Триггер («изменение») будет вызывать любые события, которые уже связаны с этой радиокнопкой.

Вы также можете использовать метки и сделать номер дня меткой.Метки могут быть связаны с вводом формы с помощью атрибута FOR.Для ввода потребуется соответствующий атрибут ID.