2017-08-23 2 views
1

は、私は、次のhtmlのチェックボックスがあるとします。クラスのセットを与えていないチェックボックスを非表示にするには?

<input class="filters identity0" name="filters[Device][]" type="checkbox" value="ipad"> 
<input class="filters identity0 identity1 " name="filters[Device][]" type="checkbox" value="ipad"> 
<input class="filters identity identity2" name="filters[Device][]" type="checkbox" value="ipad"> 

私は彼らに共通する少なくとも1つのクラスを持っているチェックボックスを表示したいです。私はこれを達成するために書いたjQueryがある:彼らは共通してidentity0を持っていますが、それはそれらのすべてを隠すため

$('label:not(:has('filters identity0'))').hide(); 

さて、これは最初の2つのチェックボックスを非表示にします。これは私がやろうとしていることの一例です。これに関するすべての助けに感謝します。

これは私が実際にやっていることです。あなたが使用することができます

$('body').on('change', '.filters', function() { 
      if(this.checked){ 
      var _class=$(this).attr('class'); 
      $('label:not(:has('+_class+'))').hide(); 
      console.log(_class); 
      } 
    }); 
+1

':')(持っているが、有効なセレクタを必要とするので、それは 'する必要があります:'(.filters、.identity0)を持って、私はまだロジックは、より多くのを見ずに正しいことはよく分からないが、あなたのHTML –

+0

私はクラス名を動的に取得しています。自分の質問を更新しました@RoryMcCrossan – Anonymous

+0

'has()'で有効になるように 'class'値をハックする必要があります。 –

答えて

0

.hasClass("identity0"); 
0

の作業例:

var classToHide = "identity0" 
 

 
$("input:checkbox").each(function(index, input) { 
 
    if($(input).hasClass(classToHide)) { 
 
    $(input).hide(); 
 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="filters identity0" name="filters[Device][]" type="checkbox" value="ipad"> 
 
<input class="filters identity0 identity1 " name="filters[Device][]" type="checkbox" value="ipad"> 
 
<input class="filters identity identity2" name="filters[Device][]" type="checkbox" value="ipad">

又は好ましいと簡単な方法:

var classToHide = "identity0" 
 

 
$("input:checkbox." + classToHide).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="filters identity0" name="filters[Device][]" type="checkbox" value="ipad"> 
 
<input class="filters identity0 identity1 " name="filters[Device][]" type="checkbox" value="ipad"> 
 
<input class="filters identity identity2" name="filters[Device][]" type="checkbox" value="ipad">

関連する問題