10

jQuery には非常に単純な要件があります。ラジオ ボタンがオンになっている場合は一連のボックスをオンにし、別のボタンがオンになっている場合はすべてのボックスをオフにすることです。

jqueryは機能しますが、一度しか機能しません。つまり、クリックしてすべてをチェックし（すべてのボックスをチェック）、クリックしてクリアし（すべてのボックスをクリア）、もう一度クリックしてすべてをチェックすると、効果はありません。同様に、いくつかのチェックボックスを手動でオフにしてから、もう一度クリックしてすべてを選択しても、効果はありません。

jQuery

$('#all').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').attr('checked', false);   
    } else {
        $('.country').attr('checked', true);
    }
});


$('#none').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').attr('checked', true);    
    } else {
        $('.country').attr('checked', false);
    }
});

HTML

 <div class="subselect">
    <input type="radio" class="TLO" name="radio1" id="all" />Check All
<br />
        <input type="radio" class="TLO" name="radio1" id="none" />Clear All
        <br />
    </div>

    <br />
    <br />
    <div class="cselect" id="countries">
        <input type="checkbox" class="country"  />1
        <br />
        <input type="checkbox" class="country"  />2
        <br />
        <input type="checkbox" class="country"  />3
    </div>

jsFiddle http://jsfiddle.net/vsGtF/1/

4

2 に答える 2

34

に変更.attr()します.prop()。

$('#all').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').prop('checked', false);   
    } else {
        $('.country').prop('checked', true);
    }
});    
$('#none').on('change', function() {
    if (!$(this).is(':checked')) {
        $('.country').prop('checked', true);    
    } else {
        $('.country').prop('checked', false);
    }
});

jsFiddle の例

これを次のように減らすこともできます。

$('#all').on('change', function () {
    $('.country').prop('checked', $(this).is(':checked'));
});
$('#none').on('change', function () {
    $('.country').prop('checked', !$(this).is(':checked'));
});

jsFiddle の例

.attr()状態のドキュメントとして:

jQuery 1.6 以降、.attr() メソッドは、設定されていない属性に対して undefined を返します。フォーム要素のチェック状態、選択状態、無効状態などの DOM プロパティを取得および変更するには、.prop() メソッドを使用します。

于 2013-02-04T03:56:12.657 に答える
4

私はこれがここでたくさんだまされたことを知っていますが、私は何かを逃しました、私は持っていました:

id = $(this).attr('id');
if($('#checkbox_' + id).prop('checked')){
    $('#checkbox_' + id).attr('checked', false);
} else {
    $('#checkbox_' + id).attr('checked', true);
}

上記のように、 attr のすべてのケースで prop() を交換する必要があります

if($('#checkbox_' + id).prop('checked')){
    $('#checkbox_' + id).prop('checked', false);
} else {
    $('#checkbox_' + id).prop('checked', true);
}

それが誰かを助けることを願っています...

于 2013-12-03T16:24:31.013 に答える