Флажок jQuery не проверяется

У меня есть настройка формы, поэтому, когда вы устанавливаете флажок, соответствующий UL расширяется, показывая дополнительные параметры в зависимости от выбора. Это работает, но только когда пользователь щелкает метку флажка. Если флажок установлен, UL расширяется, как и ожидалось, но флажок не устанавливается.

Javascript:

  jQuery(document).ready(function()
  {
     jQuery('.toggleUL').click(function()
     {
        var checkbox = jQuery(this).find('input');
        var ul       = jQuery(this).next('ul');

        if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); }

        if (checkbox.attr('checked') == false)
        {
           checkbox.attr('checked', true);
        }
        else
        {
           checkbox.attr('checked', false);
        }


        ul.slideToggle('slow'); return false;
     });
  });

HTML:

       <label class="toggleUL"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label>
       <ul style="list-style-type: none; display: none">
          <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li>
          <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li>
          <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li>
       </ul>

Функция slideToggle() не работала должным образом. При нажатии на поле/ярлык UL расширялась, а затем мгновенно убиралась. Единственный способ, которым я мог остановить это, - это добавить «return false»; что, конечно же, приводит к тому, что флажок не устанавливается. Отсюда и checkbox.attr().

Взломанный код, я знаю. Но как я могу заставить флажок работать? >.‹


checkbox toggle jquery
person spirax    schedule 06.11.2009    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я бы посоветовал вам прикрепить событие щелчка непосредственно к флажку и использовать for элемента label, чтобы связать его с флажком:

<input type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />
<label for="quoteWebsite">xxx</label>

Я упростил ваш код:

jQuery(function () {
     jQuery('#quoteWebsite').click(function() {
        var checkbox = jQuery(this),
            ul = jQuery(this).siblings('ul');

        if (ul.css('display') == 'block') {
          ul.find('input').attr('checked', false);
        }

        ul.slideToggle('slow');
     });
});

Теперь, поскольку событие щелчка прикреплено к флажку, вам не нужно вручную обрабатывать переключение атрибута checked или отменять событие.

Проверьте приведенный выше пример здесь.

person Christian C. Salvadó    schedule 06.11.2009

arrow_upward
0
arrow_downward

добавить свойство for="quoteWebsite" к ярлыку

<label class="toggleUL" for="quoteWebsite"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label>
   <ul style="list-style-type: none; display: none">
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li>
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li>
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li>
   </ul>

поэтому, когда пользователь нажимает на метку, это повлияет на флажок, и вам нужно только добавить обработчик события щелчка на флажок.

jQuery(document).ready(function()
{
  jQuery('#quoteWebsite').click(function()
  {
    var checkbox = jQuery(this);
    var ul       = jQuery(this).closest('label').next('ul');

    if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); }

    if (checkbox.attr('checked') == false)
    {
       checkbox.attr('checked', true);
    }
    else
    {
       checkbox.attr('checked', false);
    }


    ul.slideToggle('slow'); return false;
  });
});
person Anwar Chandra    schedule 06.11.2009
comment
Это вообще остановило проверку флажка. Не при нажатии на себя или на его метку. - person spirax; 06.11.2009

arrow_upward
0
arrow_downward

Я бы посоветовал вам использовать событие изменения флажка, поскольку событие щелчка не является кросс-браузерным при работе с флажками. Проверьте следующее обсуждение JQuery Click vs Change

Еще одна вещь, которую я заметил в решении CMS, заключается в том, что у него есть небольшая проблема. Рассмотрим следующий сценарий: что, например, если вы установите флажок, параметры будут расширены, и по какой-то причине страница обновится. Основной флажок останется установленным, но другие параметры исчезнут. Тогда вы попадете в настоящий конфликт. Когда вы снимаете флажок, параметры будут расширяться, и наоборот.

Ниже у вас есть исправление. Это намного проще и чище. Проверьте это в действии.

<label for="quoteWebsite">xxx</label>
<input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />  

    <ul id="options" style="list-style-type: none; display: none">
        <li style="margin-left: 20px">
            <label>
                <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1"
                    value="xxx" />xxx</label></li>
        <li style="margin-left: 20px">
            <label>
                <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2"
                    value="xxx" />xxx</label></li>
        <li style="margin-left: 20px">
            <label>
                <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3"
                    value="xxx" />xxx</label></li>
    </ul>




    $(document).ready(function(){

        $('#quoteWebsite').change(function(){            
            $('#options').slideToggle('slow');
        });

        if ($('#quoteWebsite').is(':checked')) {
            $('#options').slideDown();
        } else {
            $('#options').slideUp();
        }  
    });
person Mehmetali Shaqiri    schedule 06.11.2009