JQuery флажок выбрать все, выберите нет и выберите группу

0

У меня есть форма с флажками, разбитыми на группы с группой переключателей, чтобы выбрать все и выбрать none. Ярлыки меток получат класс, прикрепленный к ним (для css, чтобы сделать его образ). Проблема, с которой я сталкиваюсь, заключается в том, что скрипт возвращается в себя в условном выражении, и я вытягиваю свои волосы, пытаясь понять это.

Я создал страницу JSFiddle с кодом здесь http://jsfiddle.net/jaread83/V5SSM/

Что я хочу:

SelectAll щелкнут, все метки меток получат класс "c_on", и все флажки будут проверены.

SelectNone нажата, все метки меток имеют класс 'c_on', и все флажки не установлены.

Когда щелкает section_label, все метки меток в этом разделе получают 'c_on', а также проверяются, а затем, когда он не установлен, удаляют проверенное состояние и удаляют класс 'c_on' только из этого раздела.

Когда щелкнули одну метку флажка, которая не является меткой section_label, эта метка одного элемента добавляет класс "c_on", а флажок получает статус проверки.

Html:

<div class="form">
<div class="document">
    <div class="section inline">
        <label class="label_radio lightblue" id="selectAllButton" for="selectAll">
            <input type="radio" name="masscheck" id="selectAll" />Select all</label>
    </div>
    <div class="section inline">
        <label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
            <input type="radio" name="masscheck" id="selectNone" />Select none</label>
    </div>
    <div class="clear"></div>
</div>
<div class="document">
    <div class="section">
        <label class="label_check section_label blue" for="docs_1131">
            <input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
    </div>
</div>
<div class="document">
    <div class="section">
        <label class="label_check section_label blue" for="docs_1118">
            <input type="checkbox" id="docs_1118" name="docs" value="1118" />
            Section 1
        </label>

        <blockquote>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1119">
                    <input type="checkbox" id="docs_1119" name="docs" value="1119" />
                    Subsection 1.1
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1120">
                    <input type="checkbox" id="docs_1120" name="docs" value="1120" />
                    Subsection 1.2
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1121">
                    <input type="checkbox" id="docs_1121" name="docs" value="1121" />
                    Subsection 1.3
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1122">
                    <input type="checkbox" id="docs_1122" name="docs" value="1122" />
                    Subsection 1.4
                </label>
            </div>
        </blockquote>
    </div>
</div>

<div class="document">
    <div class="section">
        <label class="label_check section_label blue" for="docs_1123">
            <input type="checkbox" id="docs_1123" name="docs" value="1123" />
            Section 2
        </label>

        <blockquote>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1124">
                    <input type="checkbox" id="docs_1124" name="docs" value="1124" />
                    Subsection 2.1
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1125">
                    <input type="checkbox" id="docs_1125" name="docs" value="1125" />
                    Subsection 2.2
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1126">
                    <input type="checkbox" id="docs_1126" name="docs" value="1126" />
                    Subsection 2.3
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1127">
                    <input type="checkbox" id="docs_1127" name="docs" value="1127" />
                    Subsection 2.4
                </label>
            </div>
        </blockquote>
    </div>
</div>


<button type="submit" class="icon icon-arrow-white">Submit</button>

JS:

jQuery(document).ready(function($) {
//check all and checknone
  $('#selectAll').click(function() {
      var selectAllButton = $('#selectAllButton');
      var selectNoneButton = $('#selectNoneButton');
      var checkboxes = $(this).closest('form').find(':checkbox');
      var checklabels = $('.label_check');
      checkboxes.attr('checked', true);
      checklabels.addClass('c_on');
      selectAllButton.addClass('c_on');
      selectNoneButton.removeClass('c_on');
  });

  $('#selectNone').click(function() {
      var selectAllButton = $('#selectAllButton');
      var selectNoneButton = $('#selectNoneButton');
      var checkboxes = $(this).closest('form').find(':checkbox');
      var checklabels = $('.label_check');
      checkboxes.attr('checked', false);
      checklabels.removeClass('c_on');
      selectNoneButton.addClass('c_on');
      selectAllButton.removeClass('c_on');
  });

  //check all within section
  $('.section .section_label').click(function(){
    var p = $(this).parent();

    if($(this).hasClass('c_on')){
      // remove the checkbox classes on sub sections
      p.find('.subsection').find('label').removeClass('c_on');
      // remove the class from the thing we have clicked
      $(this).removeClass('c_on');
    } else {
      p.find('.subsection').find('label').addClass('c_on');
      $(this).addClass('c_on');
    }
  });

 });

Любая помощь с этим была бы весьма признательна.

Теги:
forms

2 ответа

0
Лучший ответ

Используйте prop() вместо attr() чтобы проверить флажки, проверьте демонстрацию здесь

Обновить

jQuery(document).ready(function($) {
//check all and checknone
  $('#selectAll').click(function() {
      var selectAllButton = $('#selectAllButton');
      var selectNoneButton = $('#selectNoneButton');
      var checkboxes = $('input:checkbox');
      var checklabels = $('.label_check');
      checkboxes.prop('checked', true);
      checklabels.addClass('c_on');
      selectAllButton.addClass('c_on');
      selectNoneButton.removeClass('c_on');
  });

  $('#selectNone').click(function() {
      var selectAllButton = $('#selectAllButton');
      var selectNoneButton = $('#selectNoneButton');
      var checkboxes = $('input:checkbox');
      var checklabels = $('.label_check');
      checkboxes.prop('checked', false);
      checklabels.removeClass('c_on');
      selectNoneButton.addClass('c_on');
      selectAllButton.removeClass('c_on');
  });

  //check all within section
    $('.section .section_label input:checkbox').click(function(){

    var p = $(this).parents('.section');

     p.find('div.subsection input:checkbox').prop('checked', this.checked);
    if(!this.checked){
       $(this).parent().removeClass('c_on')            
      // remove the checkbox classes on sub sections
      p.find('.subsection').find('label').removeClass('c_on');
      // remove the class from the thing we have clicked
      $(this).removeClass('c_on');
    } else {
       $(this).parent().addClass('c_on')
        p.find('.subsection').find(':checkbox').prop('checked', true)
      p.find('.subsection').find('label').addClass('c_on');
      $(this).addClass('c_on');
    }
  });

 });

сообщите мне, если у вас есть какие-либо вопросы или проблемы.

Рад помочь вам

  • 0
    Это работает блестяще! Выбор всех блоков работает отлично, а выбор группы - просто потрясающий! Теперь все, что мне нужно, это немного расширить его для работы с каждым отдельным флажком. Мне нужно сделать так, чтобы флажки секций были немного более общими, чем специфичными для идентификаторов, так как эта форма генерируется и может в конечном итоге стать намного больше с точки зрения секций.
  • 0
    вы можете использовать $('.section .section_label input:checkbox') вместо $('#docs_1118, #docs_1123') проверить мое обновление
Показать ещё 2 комментария
1

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

$('#selectAllButton').on('click', function () {
    $('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
    $('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
});

$('.section .section_label input').click(function () {

    var chckClass = "";
    if (!this.checked) {
        chckClass = ""; 
    } else {
       chckClass = "c_on"
    }
    $(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
});
$('input[type="checkbox"]').on('click', function () {
     var chckClass = "";
    if (!this.checked) {
        chckClass = ""; 
    } else {
       chckClass = "c_on"
    }
    $(this).closest('label').removeClass('c_on').addClass(chckClass);
});

DEMO

  • 1
    Ух ты, это здорово и полностью переписано, чтобы быть короче! Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню