使用Javascript選擇/取消選擇Rails 4中的所有動態復選框

Question

我按照這個StackOverflow的問題的正確答案為和ANSWER2

但沒有得到結果。當我從Range表中調用所有復選框列表的數據時。 並且它們的ID也是由數據定義的。讓我向您展示此屏幕截圖的代碼

= f.collection_check_boxes :range_ids, Range.active, :id, :name, {},:class=>'checkbox'

返回為

<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">

我想如果選擇/取消選擇All意味着id="campaign_range_ids_4"則所有其他復選框也應相應執行。

這里還有范圍表的屏幕截圖

我曾經嘗試過這個Javascript

:javascript
  $('#campaign_range_ids_4').click(function() {
       if(this.checked) {
           $('#campaign_range_ids_1').checked = true;
           $('#campaign_range_ids_2').checked = true;
           $('#campaign_range_ids_3').checked = true;
           });
       } else {
           $('#campaign_range_ids_1').checked = false;
           $('#campaign_range_ids_2').checked = false;
           $('#campaign_range_ids_3').checked = false;
           });
       }
    });

請糾正我在哪里做錯的事...。在此先感謝.. :)

更新的問題

我遵循Shridhar和Pavan的回答，它的工作原理非常完美，但是現在我希望當我選擇All時，再取消選擇任何一個，然后必須取消選中“ All”（第4個復選框），但它保持原樣。

Answer 1

如我所說，應該是$('#campaign_range_ids_4')而不是$('#campaign_beacon_range_ids_4')

這也將工作

$('#campaign_range_ids_4').click(function() {
   if(this.checked) {
       $(':checkbox').each(function() {
           this.checked = true;                        
       });
   } else {
      $(':checkbox').each(function() {
           this.checked = false;                        
       });
   } 
});

演示版

Answer 2

選擇器錯誤，應為$('#campaign_range_ids_4')而非$('#campaign_beacon_range_ids_4')使用prop()設置復選框狀態

嘗試這個

$('#campaign_range_ids_4').click(function () {

    if ($(this).is(':checked')) {
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);

    } else {
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
    }

});

演示

要么

$('#campaign_range_ids_4').click(function () {
    $('#campaign_range_ids_1, #campaign_range_ids_2, #campaign_range_ids_3').prop('checked', $(this).is(':checked'));
});

演示

Answer 3

將選擇器更改為$('#campaign_range_ids_4')並執行以下操作：

$('#campaign_range_ids_4').change(function() {
    $('#campaign_range_ids_1, #campaign_range_ids_2, #campaign_range_ids_3').prop('checked', this.checked);
});

而不是click使用change方法。

Answer 4

最終修改了Sridhar的答案，我得到了我更新的問題的答案。

我想，如果All （4復選框）被checked ，那么所有復選框應該被選中，如果它unchecked ，那么所有復選框，應unchecked它完美

但問題我已經發現，如果All （4復選框）被選中，那么它檢查所有箱子然后如果我未選中任何復選框，然后All （4復選框）必須uncheked這是不會發生。

修改代碼后的解決方案：將來如果其他人遇到相同的問題。

HTML代碼：

<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">London
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">India
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">USA
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">All

JavaScript：

$('#campaign_range_ids_4').click(function () {

    if ($(this).is(':checked')) {
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);

    } else {
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
    }

});

$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').click(function () {

    if ($(this).is(':checked')) {
        } else {
            $('#campaign_range_ids_4').prop('checked', false);
    }

});

工作演示：