0

我写了一个简单的脚本来计算有多少勾选框被勾选并显示/隐藏它们的内容。它在某些浏览器中运行良好，但即使使用 FF 测试 2 个 mac 也都返回不同。IE。如果没有盒子，它会返回落后，更多的是应该改变显示的 div。

奇怪的是，一些浏览器正在逆转这一点，例如，如果所有的方框都打勾，它会显示落后而不是创新。

有任何想法吗？

<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').change(function() {
//alert($('input:checked').size())
//if laggard
if ($('input:checked').size() < 1) {
$("div#four").show();
$("div#one").hide();
$("div#two").hide();
$("div#three").hide();
$("div#EM").hide();
}
//late majority
else if ($('input:checked').size() < 2) {
$("div#three").show();
$("div#one").hide();
$("div#two").hide();
$("div#four").hide();
$("div#EM").hide();
}
// early majority
else if ($('input:checked').size() < 4) {
$("div#two").hide();
$("div#one").hide();
$("div#three").hide();
$("div#four").hide();
$("div#EM").show();
}
// early adopter
else if ($('input:checked').size() < 6) {
$("div#two").show();
$("div#one").hide();
$("div#three").hide();
$("div#four").hide();
$("div#EM").hide();
}
else if ($('input:checked').size() < 7) {
$("div#one").show();
$("div#two").hide();
$("div#three").hide();
$("div#four").hide();
$("div#EM").hide();
}
   else {
  // do something here
$("div#four").show();
 $("div#one").hide();
 $("div#two").hide();
 $("div#three").hide();
 $("div#EM").hide();

}
});   
   $('#showMore').click(function() {
  $('#answer').show('slow', function() {
  });
});

    });

</script>
4

1 回答 1

0

Laggard单击所有复选框时会显示的唯一原因是您有 7 个或更多复选框。我在这里创建了一个 jsfiddle。

http://jsfiddle.net/wirey00/a3Tx8/

此外，这是编写代码的更短的方法

$('input[type=checkbox]').change(function() {
    var len = $('input:checked').length;  
    $('#four').toggle(len<1 || len > 6);
    $('#three').toggle(len==1);
    $('#two').toggle(len==4 || len==5);
    $('#one').toggle(len==6);
    $('#EM').toggle(len==2 || len==3);
});​

Using .toggle() allows for you to pass in a condition(true/false) which determines if it is shown(true) or hidden(false)

于 2012-08-21T18:30:27.770 回答