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

当没有选中复选框时显示一条消息

2 个答案: