4

我有一个附有复选框的商店名称列表。我有另一个属于这些商店的分类法列表。当我点击一家商店时，它只会向我显示具有相同价值的分类法。

我使用这个脚本来做到这一点：

$(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>
4

2 回答 2

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/

希望这可以帮助。

于 2013-10-03T19:06:27.607 回答
0

假设.store_checkbox是一个分配给所有复选框的类，您的逻辑需要如下所示：

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

或者，您可以使用一些不同的语法，更像是您的第二个示例。有趣的是，jQuery 的 .is() 方法的对立面不是 .not()，而是 !.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

于 2013-10-03T19:08:08.573 回答