функция jQuery для ссылку вложенные флажки


$.fn.linkNestedCheckboxes = function () {
    var childCheckboxes = $(this).find('input[type=checkbox] ~ ul li input[type=checkbox]');
    childCheckboxes.change(function () {
        var checked = $(this).attr('checked');
        checked = checked || ($(this).closest('li').siblings('li').find('input:checked').length > 0)
        childCheckboxes.parent().closest('ul').siblings('input[type=checkbox]').attr('checked', checked);
    });

    var parentCheckboxs = childCheckboxes.parent().closest('ul').siblings('input[type=checkbox]')
    parentCheckboxs.change(function () {
        $(this).siblings('ul').find('input[type=checkbox]').attr('checked', $(this).attr('checked'))
    })
    return $(this);
};

Пример использования:

<script type="text/javascript">
    $(document).ready(function () {
        $('form').linkNestedCheckboxes();
    });
</script>

<form>
    <input type="checkbox" name="parent" />
    <ul>
        <li><input type="checkbox" name="child1" /></li>
        <li><input type="checkbox" name="child2" /></li>
    </ul>
</form>

Результатом этого является:

  • Когда родитель проверено/непроверено все дочерние чекбоксы будут в том же состоянии
  • Если ничего не проверил, и один из детей потом проверил, родитель будет проверено
  • Когда последний ребенок бесконтрольно родитель будет снят

Что я хотел бы знать:

  • Я просто заново изобрели колесо?
  • Если нет, существует ли более эффективный способ сделать это? Селекторы кажется выше немного запутанным.
  • Это работает на моей машине, но я не проверял это вне моего общества требования для одной формы, это разобьет что-нибудь другое, чем мой простенький пример HTML-страницы?


6933
2
задан 9 сентября 2011 в 12:09 Источник Поделиться
Комментарии
1 ответ

Во-первых, использовать .проп не .в том случае, если вы используете jQuery версии v1.6+.

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

Если вы имеете в виду, что родитель "проверено", когда любой из детей "проверено":

http://jsfiddle.net/FS3CC/1/

$.fn.linkNestedCheckboxes = function () {
var childCheckboxes = $(this).find('input[type=checkbox] ~ ul li input[type=checkbox]');

childCheckboxes.change(function(){
var parent = $(this).closest("ul").prevAll("input[type=checkbox]").first();
var anyChildrenChecked = $(this).closest("ul").find("li input[type=checkbox]").is(":checked");
$(parent).prop("checked", anyChildrenChecked);
});

// Parents
childCheckboxes.closest("ul").prevAll("input[type=checkbox]").first()
.change(function(){
$(this).nextAll("ul").first().find("li input[type=checkbox]")
.prop("checked", $(this).prop("checked"));
});

return $(this);
};

Во-первых в //родителей изменить событие, которое вы хотите установить детям какую нибудь ценность родительской несмотря ни на что.

Это родительский элемент:

// Parents
childCheckboxes.closest("ul").prevAll("input[type=checkbox]").first()

его событие change означает установить все флажки ребенка то же значение

.prop("checked", $(this).prop("checked"));

Регистрация событий изменения поле ребенка немного сложнее, но в основном она находит контакт с любым ребенком флажки, которые проверяются и соответствующего родителя.

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

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

<form>
<input type="checkbox" name="parent" id="parent" />
<ul>
<li><input type="checkbox" name="child1" data-parent="parent" />
<li><input type="checkbox" name="child2" data-parent="parent" />
</ul>
</form>

Что бы сделать селекторы проще:

(от ребенка)

var parent = $("#" + $(this).data("parent"));

(от родителей)

var children = $("input[data-parent=" + $(this).attr("id") + "]");

3
ответ дан 9 сентября 2011 в 04:09 Источник Поделиться