0

チェックボックスの数をカウントし、それらのコンテンツを表示/非表示にする簡単なスクリプトを作成しました。一部のブラウザでは正常に動作しますが、FF を使用して 2 台の Mac をテストしても、両方とも異なる結果が返されます。すなわち。ラグガードを返すボックスがない場合、これ以上は表示上の 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);
});​

.toggle（）を使用すると、それがまたはであるかcondition(true/false)どうかを決定するを渡すことができますshown(true)hidden(false)

于 2012-08-21T18:30:27.770 に答える