JQuery выбор / снятие флажков в детей / родителей <li> - PullRequest
Новая
       10

JQuery выбор / снятие флажков в детей / родителей <li>

0 голосов
/ 22 сентября 2010

У меня есть следующее 

<ul>
   <li>Main
    <ul>
        <li><input type="checkbox" onclick="$.SelectChildren(this);" /> parent 1
           <ul>
               <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub 1</li>
               <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub 2
                  <ul>
                     <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub sub 2</li>
                     <li><input type="checkbox" onclick="$.SelectChildren(this);" />sub sub 3</li>
                  </ul>
                </li>
            </ul> 
        </li>
        <li><input type="checkbox" onclick="$.SelectChildren(this);" />parent 2</li>
    </ul>
   </li>
</ul>

Теперь для моей функции JQuery: 

(function ($) {
    $.SelectChildren = function (element) {
        if ($(element).is(':checked')) {
            $(element).parent().find(':checkbox').attr('checked', true);
        }
        else {
            $(element).parent().find(':checkbox').attr('checked', false);
        }
    }
})(jQuery);

как мне отменить выбор ТОЛЬКО (всех) родительских флажков при отмене проверки дочернего элемента

например: при установке флажка «sub sub 2» -> также следует снять флажки «sub 2» и «parent 1».

спасибо

Ответы [ 5 ]

2 голосов
/ 22 сентября 2010

Используйте .children() (чтобы получить непосредственные дочерние элементы) вместо .find() (который выглядит повсюду ниже) в .parents() , например: 

(function ($) {
  $.SelectChildren = function (element) {
    $(element).parents().children(':checkbox').attr('checked', element.checked);
  };
})(jQuery);

Поскольку вы передаете логическое значение, вы можете просто напрямую использовать свойство .checked.

Вы можете попробовать здесь , более традиционный подход для получения того же эффекта будет выглядеть так: 

$(function() {
  $(":checkbox").change(function () {
    $(this).parents().children(':checkbox').attr('checked', this.checked);
  });
});

Вы можете попробовать эту версию здесь .

0 голосов
/ 12 сентября 2013 
<script>  

            var checkParent  = function(ref) {
                return $(ref).parent().parent().parent().children().first();

            }

           $('input[type="checkbox"]').click(function(){
                if(this.checked){
                    $(this).parent().children().find('input[type="checkbox"]').attr('checked', true);
                }

                else {
                    var a = checkParent(this);
                    while(a.length > 0 && a.prop("tagName") == "INPUT" )
                     {
                        a.attr("checked", false);
                        a = checkParent(a);

                    }

                }
           });

        </script>

Только что завершил этот алгоритм для проекта и подумал, что я поделюсь им с потоком стека

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

Убедитесь, что все флажки находятся в пределах li и все li находятся в пределах ul, иначе это не будет работать

образец HTML 

<ul id="a">
        <ul id="b">
            <li id="parentli"><input type="checkbox" id="parent"> Parent
                <ul id="c">
                     <li><input type="checkbox" id="aa">Child 1</li>
                     <li><input type="checkbox" id="ab">Child 2
                        <ul id="d">
                             <li><input type="checkbox" id="aba">Child 2-1</li>
                        </ul>
                     </li>
                     <li><input type="checkbox" id="ac">Child 3</li>
                </ul>
            </li>
        </ul>

   </ul>
0 голосов
/ 08 мая 2013

Вы можете использовать этот код, чтобы флажок показывал / скрывал элементы childer ИЛИ элементы внутри DIV (или в этом случае группы начальной загрузки).

Шаг # 1 - применить к переключателю класс 'switch'. Убедитесь, что установлен идентификатор флажка

Step # 2 - для элемента, который вы хотите скрыть / переключить, добавьте класс с помощью chcekboxID 

// -------------------------
// Checkbox to toggle related input fields
// Checkbox control class = switch
// -------------------------
$('.switch').each(function() {
    var tItems = $(this).attr('id');
    $('.' + tItems).hide();
});
// Toggle elements
// <div class="control-group applied_before <-- checkbox ID">
$('.switch').change(function () {
    var tItems = $(this).attr('id');
    $('.' + tItems).toggle();
});
// -------------------------
// -------------------------


<fieldset>
    <legend>Criminal History</legend>   
    <div class="control-group">
        <input type="checkbox" name="criminal_offender" id="criminal_offender" class="switch" />
        <label>criminal_offender</label>
    </div>

    <div class="control-group criminal_offender">
        <label>criminal_offense</label>
        <input type="text" name="criminal_offense" id="criminal_offense" />
    </div>

    <div class="control-group criminal_offender">
        <label>criminal_st_code</label>
        <input type="text" name="criminal_st_code" id="criminal_st_code" />
    </div>

    <div class="control-group criminal_offender">
        <label>criminal_date</label>
        <input type="text" name="criminal_date" id="criminal_date" />
    </div>
</fieldset>
0 голосов
/ 22 сентября 2010

Определить, будет ли родитель определенного класса, как «родитель»

Тогда 

$(".parent").attr("checked", false);

Очень просто

0 голосов
/ 22 сентября 2010

Как насчет: 

$(element).parents(":checkbox").attr('checked', false);

ОБНОВЛЕНИЕ.Это неправильно, см. Решение Ника.

...