jQuery 隐藏复选框的多个值
jQuery hide on checkbox multiple values
我有 7 个复选框,所有 ID 都不同。这些 ID 与 div 对应,其中包含一个数据方法。单击复选框将隐藏所有 div,但具有相应 ID 的复选框除外。
这一刻有效!但是当我 select 多个复选框时,所有 div 都消失了。
这是我的 javascript:
<script type="text/javascript">
jQuery('.filter_methode input').change(function()
{
jQuery('.featured-item-container').show();
jQuery('input').each(function()
{
var Checked;
if(Checked = jQuery(this).attr('checked'))
{
jQuery(".featured-item-container:not([data-methode='" + this.id + "'])").hide();
};
});
});
</script>
我想知道如何优化此脚本,使其监听所有 selected ID。
编辑
这是 HTML:
<div class="filter_methode">
<label><input type="checkbox" name="methode_1" id="methode_1" />
Methode 1</label>
<label><input type="checkbox" name="methode_2" id="methode_2" />
Methode 2</label>
<label><input type="checkbox" name="methode_3" id="methode_3" />
Methode 3</label>
<label><input type="checkbox" name="methode_4" id="methode_4" />
Methode 4</label>
<label><input type="checkbox" name="methode_5" id="methode_5" />
Methode 5</label>
<label><input type="checkbox" name="methode_6" id="methode_6" />
Methode 6</label>
<label><input type="checkbox" name="methode_7" id="methode_7" />
Methode 7</label>
<label><input type="checkbox" name="methode_8" id="methode_8" />
Methode 8</label>
<div class="featured-container col-md-12">
<div class="row">
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_3">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_7">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_8">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_2">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_4">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_8">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_5">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_6">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_5">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_2">
Some text and image in here
</div>
</div>
</div>
因此,当我单击 ID 为 methode_1 的复选框时,它只会显示数据方法为 div 的 div,但是当我还单击复选框时 [=32] =] 所有 div 都消失了,而不是向我显示带有 methode_1 和 methode_2
的 div
现在我有了这里的代码就是解决方案:
jQuery('.filter_methode input').change(function()
{
jQuery('.featured-item-container').hide();
jQuery('input').each(function(k,v)
{
var Checked = $(v).prop( "checked" );
if(Checked)
{
jQuery(".featured-item-container[data-methode='" + v.id + "']").show();
};
});
if(jQuery('input:checked').length == 0) {
jQuery('.featured-item-container').show();
}
});
匿名函数中没有"this"。您可以使用第二个参数访问该对象。
我有 7 个复选框,所有 ID 都不同。这些 ID 与 div 对应,其中包含一个数据方法。单击复选框将隐藏所有 div,但具有相应 ID 的复选框除外。
这一刻有效!但是当我 select 多个复选框时,所有 div 都消失了。
这是我的 javascript:
<script type="text/javascript">
jQuery('.filter_methode input').change(function()
{
jQuery('.featured-item-container').show();
jQuery('input').each(function()
{
var Checked;
if(Checked = jQuery(this).attr('checked'))
{
jQuery(".featured-item-container:not([data-methode='" + this.id + "'])").hide();
};
});
});
</script>
我想知道如何优化此脚本,使其监听所有 selected ID。
编辑 这是 HTML:
<div class="filter_methode">
<label><input type="checkbox" name="methode_1" id="methode_1" />
Methode 1</label>
<label><input type="checkbox" name="methode_2" id="methode_2" />
Methode 2</label>
<label><input type="checkbox" name="methode_3" id="methode_3" />
Methode 3</label>
<label><input type="checkbox" name="methode_4" id="methode_4" />
Methode 4</label>
<label><input type="checkbox" name="methode_5" id="methode_5" />
Methode 5</label>
<label><input type="checkbox" name="methode_6" id="methode_6" />
Methode 6</label>
<label><input type="checkbox" name="methode_7" id="methode_7" />
Methode 7</label>
<label><input type="checkbox" name="methode_8" id="methode_8" />
Methode 8</label>
<div class="featured-container col-md-12">
<div class="row">
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_3">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_7">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_8">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_2">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_4">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_8">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_5">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_6">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_5">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_2">
Some text and image in here
</div>
</div>
</div>
因此,当我单击 ID 为 methode_1 的复选框时,它只会显示数据方法为 div 的 div,但是当我还单击复选框时 [=32] =] 所有 div 都消失了,而不是向我显示带有 methode_1 和 methode_2
的 div现在我有了这里的代码就是解决方案:
jQuery('.filter_methode input').change(function()
{
jQuery('.featured-item-container').hide();
jQuery('input').each(function(k,v)
{
var Checked = $(v).prop( "checked" );
if(Checked)
{
jQuery(".featured-item-container[data-methode='" + v.id + "']").show();
};
});
if(jQuery('input:checked').length == 0) {
jQuery('.featured-item-container').show();
}
});
匿名函数中没有"this"。您可以使用第二个参数访问该对象。