jQuery toggleClass и установите флажок - PullRequest
Новая
       13

jQuery toggleClass и установите флажок

0 голосов
/ 09 февраля 2010

Я не могу заставить это работать.Если я уберу часть скрипта с флажками, то класс переключения будет работать, но если я добавлю его, то он больше не будет переключать класс.Я абсолютный любитель в этом, поэтому я был бы очень признателен за любую помощь.Я использую jQuery версии 1.4.1.Спасибо. 

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected').children("input[@type=checkbox]")[0].click();
});

Итак, по сути, я создаю веб-форму для людей, чтобы настроить ручки.Поэтому им нужно выбрать, какой цветовой отпечаток они хотят.Вместо того, чтобы просто скучный список цветов, я хотел показать образец цвета.Поэтому я решил создать список, установить несколько флажков, чтобы они могли выбирать цвета, и использовать CSS, чтобы скрыть фактический флажок, чтобы все было красиво и чисто.Я видел код для выполнения этого для кнопок радио, и я получил, что работает нормально.Я пытался адаптировать его к флажкам, но проблема заключалась в том, что вы можете выбрать только одну радиокнопку, но несколько флажков.

Чтобы дать вам пример полуфункции.Если вы заходите на бета-сайт, он работает (не очень хорошая практика, я знаю) и пытаетесь настроить перо, чтобы увидеть, что я пытаюсь сделать. Pensfast.com Beta

Ответы [ 3 ]

3 голосов
/ 09 февраля 2010

Учитывая ваши обновленные данные, это то, что вы хотите: 

$("li.imprint").click(function(){
    var $checkbox = $(this).toggleClass('selected').find(':checkbox');
    if($(this).hasClass('selected')) {
      $checkbox.attr('checked','checked');
    } else {
      $checkbox.removeAttr('checked');
    }
})

Я обеспокоен тем, что ваши уроки неверны. Вы указали li.imprint в своем вопросе, но страница, которую я посещал на вашем сайте, имела класс li.Barellimprint Очевидно, этот ответ не будет работать, если селекторы ошибочны. Попробуйте изменить первую строку на: 

$("li.Barrelimprint").click(function(){

И этот код будет работать на этой странице .

2 голосов
/ 13 декабря 2011

Это сработало для меня - он также содержит несколько флажков, каждый из которых может иметь различное начальное состояние.

CSS: 

.dragable { margin: 4px; border: 1px solid #c6e1ff; line-height: 15px;}
.dragable.selected, .dragable.unselected.selected  {background: #ebf5ff;}
.dragable.unselected {background: #ffffff;}

HTML: 

<ul id="sortable">
    <li class="dragable selected ui-state-default">
    <input name="list" type="checkbox"  checked="checked" />Results</li>
    <li class="dragable unselected ui-state-default">
    <input name="list" type="checkbox" />Benefits </li>
</ul>

Javascript: 

<script>
    $("li.dragable").click(function(){
    var $checkbox = $(this).toggleClass('selected').find(':checkbox');
    if($(this).hasClass('selected')) {
      $checkbox.attr('checked','checked');
    } else  {
      $checkbox.removeAttr('checked');
    }
})
</script>

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

1 голос
/ 09 февраля 2010

попробовать: 

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected')
        .children("input:checkbox:first").attr('checked',true);
});

Могу ли я спросить, почему вы хотите, чтобы флажок «щелкнул»?

если вы хотите установить или снять флажки, прочитайте this .

обновление

попробуйте это: 

$("li.imprint").click(function() {
      $(this).toggleClass('selected')
      $(':checkbox',this).attr('checked',$(this).is('selected'));
 });
...