トグルグループが一緒に

Question

私はこのように私のページにラジオボタンのグループを持っている：あなたがオンまたはオフのラジオボタンをチェックすると

 
ALL  (x) On () Off 
OPTION 1 (x) On () Off 
OPTION 2 (x) On () Off 
OPTION 3 (x) On () Off 
OPTION 4 (x) On () Off 

は「すべて、」それは他のすべてのラジオボタンを設定し、同じ設定に：

 
var autoPostAllOn = $('#auto-post-all-on'); 
var autoPostAllOff = $('#auto-post-all-off'); 
var fbPostToggleOn = $('.fb-post-toggle-on'); 
var fbPostToggleOff = $('.fb-post-toggle-off'); 

$(autoPostAllOn).click(function(){ 
    $(fbPostToggleOn).attr('checked', 'checked'); 
}); 
$(autoPostAllOff).click(function(){ 
    $(fbPostToggleOff).attr('checked', 'checked'); 
}); 

しかし、私はまた、逆をやりたい：例えば、ユーザーが手動ですべてオフボタンをチェックした場合、自動的にあまりにも「すべて」のためのオフボタンを確認してください。これをどうやってやりますか？

Answer 1

あなたはjQueryの1.6以降を使用している場合は、例を参照

$(function(){ 
    $("input.allon").change(function(){ 
     $("input.on").prop("checked", true); 
    }); 

    $("input.alloff").change(function(){ 
     $("input.off").prop("checked", true); 
    }); 

    $("input.on, input.off").change(function(){ 
     $("input.allon").prop("checked", 
      ($("input.on").length == $("input.on:checked").length)); 
     $("input.alloff").prop("checked", 
      ($("input.off").length == $("input.off:checked").length)); 
    }); 
}); 

を.prop使用することができます。jsfiddleを

Answer 2

jQueryを使用して、選択句でnot（チェック）を選択し、length = 0の場合はAllラジオボタンをオフにして、「All」以外のすべてのラジオボタンを取得できます。

あなたのコードのhtml部分を投稿していないため、コードは表示されません。また、あなた自身からあなた自身のことを楽しんではいけません！

Answer 3

"オフ"を選択したラジオボタンの数を数える関数を記述する必要があります。すべてオフの場合は、「すべてオフ」オプションを選択します。

「すべてのオン」と「すべてオフ」のラジオオプションをボタンに変更する方が簡単で、より直観的なオプションになる場合があります。これにより、必要に応じて状態を切り替える1回限りのアクションが実行され、ユーザーが別のものを変更したときに視覚的に更新することについて心配する必要はありません。また、これは起こってから、次のケースを防ぐ：

• ユーザーは
• 「すべての」ユーザーオプション3

あなたのコードのための「オフ」をクリックした現在もラジオ「のすべてを」去るクリックまだ選択されていますが、混乱しています。 「All on」も「All off」も選択されていない状態で、選択を一括して削除する必要があります。それだけでコードの複雑さが増しますが、単純にボタンに変更してやることができます。

Answer 4

以下のような何かトリックを行う必要があり、

DEMO

var autoPostAllOn = $('#auto-post-all-on'); 
var autoPostAllOff = $('#auto-post-all-off'); 
var fbPostToggleOn = $('.fb-post-toggle-on'); 
var fbPostToggleOff = $('.fb-post-toggle-off'); 

autoPostAllOn.change(function() {  
    fbPostToggleOn.prop('checked', true); 
}); 
$(autoPostAllOff).change(function() { 
    fbPostToggleOff.prop('checked', true); 
}); 

fbPostToggleOn.change (function() { 
    var isChecked = true; 
    autoPostAllOff.prop('checked', false); 

    fbPostToggleOn.each (function() { 
     isChecked = isChecked && this.checked; 
    }); 

    if (isChecked) { 
     autoPostAllOn.prop('checked', true); 
    } 
}); 
fbPostToggleOff.change (function() { 
    var isChecked = true; 
    autoPostAllOn.prop('checked', false); 

    fbPostToggleOff.each (function() { 
     isChecked = isChecked && this.checked; 
    }); 

    if (isChecked) { 
     autoPostAllOff.prop('checked', true); 
    } 
});