如何只显示那些选中的选项而隐藏所有未选中的选项？
我的代码只显示复选框，而不显示标签。
null
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>null
如何只显示那些选中的选项而隐藏所有未选中的选项？
我的代码只显示复选框，而不显示标签。
您可以使用input:checked与:not()组合使用来选择未选中的输入。
null
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
您应该使用:checked来选择选中的输入，并使用:not()来否定它，还应该隐藏标签，您必须循环遍历所有元素并使用选择下一个元素。next()，下面是一个工作片段:
null
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>