私のjqueryチェックボックスのバグ

Question

私はこのバグを修正する良い方法を見つけることができません。正方形のチェックを外し、赤いチェックを外し、赤を再確認したら、赤い四角形が戻ってきます。ユーザーが色のチェックを外して色を確認したときに、チェックされていない図形を追加しないようにするにはどうすればよいですか？

私の実際の仕事の例は、より多くのチェックボックスと100倍多くのデータを持っています。 JSFiddleはバグをはっきりと示しています。

ありがとうございました！それを見つけた

http://jsfiddle.net/h3AbN/

Answer 1

この1つは私の狂人を運転していました。このような単純な問題のように思えますが、私は非常に簡単な解決策を考え出すことができませんでした。とにかく、見て、これがあなたのために働くかどうか見てください。私はあなたの現在のコードよりも簡単だと思いますが、一見するとそうは考えていないかもしれません。複数のプロパティをサポートできるという利点があります。たとえば、hasBorderのような3番目のフィルタ項目を追加した場合、それは引き続き機能します。チェックボックス

の

1. モニターの変更イベントのチェックボックスがチェックされていない場合は、単にチェックボックスは、我々はものの表示を開始する必要があり、その後にチェックされている場合は、そのクラス
2. を持っているすべてを非表示にします。
3. このクラスを持つすべてのリストアイテムを取得する
4. チェックボックスがオフになっているリストアイテムを除外します。 http://jsfiddle.net/kwBTg/1/を：

http://jsfiddle.net/mgaRw/10/

$('input').change(function() { 
    var value = $(this).val(); 
    //checkbox is checked 
    if ($(this).is(':checked')) { 
     var targets = $('.filterThis li') 
      //filter on class 
      .filter(function() { 
       if ($(this).hasClass(value)) return true; 
      }) 
      //filter on other checkbox states 
      .filter(function() { 
       var classList = $(this).attr('class').split(/\s+/); 
       var index = classList.indexOf(value);    
       if (index !== -1) { 
        classList.splice(index, 1); 
       } 
       var include = true; 
       $.each(classList, function(index, item){ 
        if ($('input[value="'+item+'"]').not(':checked').length) { 
         include = false; 
         return false; 
        } 
       }); 

       return include; 
     }); 

     //show list items 
     targets.show(); 
    } 
    else {   
     //hide list items 
     $('.filterThis li').filter(function() { 
      if ($(this).hasClass(value)) return true; 
     }).hide(); 
    } 
}); 

Answer 2

。理由：この

$.each($tmp, function(i, val4) { 
    if ($(this).is(":checked")) { // problem is here 
     if ($('.' + val4 + '').is(":visible") == true) { 

Updateへ

$.each($tmp, function(i, val4) { 
    if ($this.is(":checked")) { // problem is here 
     if ($('.' + val4 + '').is(":visible") == true) { 

を変更：それはこのラインででしたか？

あなたは$ thisと$（これ）を混同していました。関数の早い段階で$ thisを定義し、ユーザーがクリックしたチェックボックスを指します。しかし、あなたの$ .each関数では、checkArrayのチェックボックスがチェックされているかどうかをチェックする必要があります。これを行うには、クリックされたチェックボックスではなく、checkArrayの項目を参照する必要があります。

Answer 3

が、私はそれをやってみると思った、私は働くここに新しいバージョンを思い付きました。