jquery входные флажки checkall или некоторые - PullRequest
Новая
       11

jquery входные флажки checkall или некоторые

0 голосов
/ 23 января 2012

Два варианта нажмите на флажок 1, затем показывает и выбирает 2, нажмите на пункт 2, затем показывает abcde

вариант 1 работает отлично

где я ошибаюсь на вариант 2

Я хотел бы выбрать abcd и один из e

Это jquery 

$(document).ready(function() {
    $('.child').hide();
    $(".parent").click(function() {
        $('#form' + $(this).attr('id')).toggle();
        $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
    });

});

Это HTML 

    <fieldset>
        <p>
            <label for="5">1</label>
            <input type="checkbox" name="1" id="5" value="360" class="parent" />$360
        </p>
        <p id="form5" class="child">
            <label for="6">2</label>
            <input type="checkbox" name="2" id="6" value="2" />$180
        </p>
    </fieldset>
<fieldset>
<p name="4" id="1st" class="parent">a</p>
<p id="form1st" class="child">
        <label for="7">a</label>
        <input type="checkbox" name="a" id="7" value="25"  />$25
<br />
        <label for="8">b</label>
        <input type="checkbox" name="b" id="8" value="18"  />$18
<br />
        <label for="9">c</label>
        <input type="checkbox" name="c" id="9" value="18"  />$18
<br />
        <label for="10">d</label>
        <input type="checkbox" name="d" id="10" value="18"  />$18
<br />
        <label for="11">e</label>
        <span id="11">
                <input type="checkbox" name="?" value="18"  />e1
                <input type="checkbox" name="?" value="36"  />e2
                <input type="checkbox" name="?" value="54"  />e3
                <input type="checkbox" name="?" value="72"  />e4
                <input type="checkbox" name="?" value="90"  />e5
                <input type="checkbox" name="?" value="100"  />e6
                <input type="checkbox" name="?" value=""  />other
        </span>
    </p>
</fieldset>

И демо

http://jsfiddle.net/vRXU3/

Ответы [ 2 ]

2 голосов
/ 23 января 2012

Вот ваша проблема.

this.checked не определено в 'варианте 2' 

.attr('checked', this.checked)

Работает, когда вы нажимаете 

 <input type="checkbox" name="1" id="5" value="360" class="parent" />

, потому что это флажок и он имеет cheched атрибут.Но когда вы нажимаете 

<p name="4" id="1st" class="parent">a</p>

с «этим», вы ссылаетесь на элемент <p>, который не имеет атрибута checked

- Обновление 

$(".parent").click(function() {

    var $target = $(event.target);
    var valueOfChecked;
    if ($target.is("input:checkbox")) {
        valueOfChecked = $target.attr('checked');
    } else {
        valueOfChecked = 'checked';
    }
    $(this).parents('fieldset:eq(0)').find('p > input:checkbox').attr('checked', valueOfChecked);
    $(this).parents('fieldset:eq(0)').find('p > span input:checkbox').first().attr('checked', valueOfChecked);
});

Пример обновления jsfiddle

0 голосов
/ 23 января 2012

Я бы попросил вас изменить ваш скрипт на: 

$(document).ready(function() {
    $('.child').hide();
    $(".parent").click(function() {
        $('#form' + $(this).attr('id')).toggle();
        $(this).parents().find('input:checkbox').attr('checked', this.checked);
    });

});

обновлено $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);

удалено 'fieldset:eq(0)' это не требуется.

...