當沒有選中複選框時顯示一條消息

Question

我有一個附有複選框的商店名稱列表。 我有另一個屬於這些商店的分類列表。 當我點擊商店時，它只顯示具有相同價值的分類法。

我用這個腳本來做到這一點：

$(document).ready(function() { 
$(".store_checkbox").change(function() { 
    $('div[store_id=' + this.value + ']').toggle(this.checked); 
}).change(); 

}); 

現在我想如果沒有框都被選中

怎麼可能做到這一點在我的分類顯示一條消息？

我想：

$(document).ready(function() { 
    if($('.store_checkbox').find('input[type=checkbox]:checked').length > 0) { 
    $("#hidden_taxon_message").show(); // any one is checked 
} else { 
    $("#hidden_taxon_message").hide(); // none is checked 
    } 
}); 

但不管它只是隱藏了消息，如果有選中或取消選中複選框

我也試過這樣：

$(function() { 

if($('.store_checkbox').not(':checked')){ 
alert("no check boxes"); 
} 
}); 

更新腳本一起

$(document).ready(function() { 
$(".store_checkbox").change(function() { 
    $('div[store_id=' + this.value + ']').toggle(this.checked); 
}).change(); 
if(!$('.store_checkbox').is(':checked')){ 
$("#hidden_taxon_message").show(); // any one is checked 
} else { 
$("#hidden_taxon_message").hide(); // none is checked 
} 
}); 

最新

$(document).ready(function() { 
$(".store_checkbox").change(function() { 
    $('div[store_id=' + this.value + ']').toggle(this.checked); 
}).change(); 

checkIfChecked(); 

}); 

$('.store_checkbox').on('change', function() { 
checkIfChecked(); 
}); 

function checkIfChecked() { 
if ($('.store_checkbox:checked').length == 0) { 
    $("#hidden_taxon_message").show(); // none are checked 
} else { 
    $("#hidden_taxon_message").hide(); // something is selected 
} 
} 

這是我的js文件的樣子。該消息似乎並沒有隱藏。 我把它放在正確的位置？

標記

<h3>Stores Offered In</h3> 
    <ul class="multi-column-checkbox"> 
    <% for store in Store.all %> 
     <li><%= check_box_tag "idea[store_ids][]", store.id, 
@idea.stores.include?(store), :class => "store_checkbox" %> <%= store.name %></li> 
    <% end %> 
    </ul> 
    <br /> 

    <hr /> 

    <h3>Taxonomies Offered In</h3> 
    <% for store in Store.all %> 
    <% if store.has_taxonomies? %> 
    <div store_id='<%= store.id %>'> 
     <h4><%= store.name %></h4> 
      <ul class="multi-column-checkbox"> 
      <% for taxonomy in store.taxonomies %> 
       <li><%= check_box_tag "idea[taxonomy_ids][]", 
taxonomy.id, @idea.taxonomies.include?(taxonomy) %> <%= taxonomy.name %></li> 
      <% end %> 
      </ul> 
    </div> 
    <% end %> 
    <% end %> 
    <div id="hidden_taxon_message"> 
     no checkboxes are selected    
    </div> 

Answer 1

您需要將支票結合的輸入框的變化情況，如下所示：

$('input[type=checkbox]').on('change', function() { 
    if ($('input[type=checkbox]:checked').length > 0) { 
     $("#warning").show(); // any one is checked 
    } else { 
     $("#warning").hide(); // none is checked 
    } 
}); 

因此，當一個新的複選框被選中的代碼會跑。

看到這個搗鼓工作示例：http://jsfiddle.net/KyleMuir/JxSXY/

編輯

對於未選擇任何你需要檢查文檔加載以及對變化，看到以下內容：

$(document).ready(function() { 
    checkIfChecked(); 
}); 

$('input[type=checkbox]').on('change', function() { 
    checkIfChecked(); 
}); 

function checkIfChecked() { 
    if ($('input[type=checkbox]:checked').length == 0) { 
     $("#warning").show(); // none are checked 
    } else { 
     $("#warning").hide(); // something is selected 
    } 
} 

小提琴：http://jsfiddle.net/KyleMuir/JxSXY/2/

希望這會有所幫助。

Answer 2

假設.store_checkbox是分配給所有的複選框一類，你的邏輯 需要看起來像這樣：

if($('.store_checkbox:checked').length == 0) { 
    $("#hidden_taxon_message").show(); // any one is checked 
} else { 
    $("#hidden_taxon_message").hide(); // none is checked 
}; 

或者，你可以使用一些不同的語法，更像是你的第二個例子。有趣的是，the opposite of jQuery's .is() method is not .not(), it is !.is()：

if(!$('.store_checkbox').is(':checked')){ 
    alert("no check boxes"); 
} 

爲了把它放在一起，你可以做這樣的事情（感謝@ gibbeirsh的編輯爲的jsfiddle）：基於

$(document).ready(function() { 
    $('.store_checkbox').click(function() { 
     msgconfig(); 
    }); 
    msgconfig(); 
}); 
function msgconfig(){ 
    if ($('.store_checkbox:checked').length == 0) { 
     $("#hidden_taxon_message").show(); 
    }else{ 
     $("#hidden_taxon_message").hide(); 
    } 
} 

jsFiddle