我正在尝试创建一个脚本来仅基于“选中”复选框的标签来隐藏 div。并且无需使用特定值、id 或属性即可完成此操作。之前向我展示了如何 do it using spans/divs ,但是复选框让我难住了。
我在 jsfiddle 中的示例: http://jsfiddle.net/6qLX7/2/
HTML:
<fieldset class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<ul>
<li>
<div class="checkbox">
<input type="checkbox" name="studio art" value=".studio_art" id="studio_art" />
<label for="studio_art">studio art</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" name="ceramics" value=".ceramics" id="ceramics" />
<label for="ceramics">ceramics</label>
</div>
</li>
</ul>
</div>
</fieldset>
<fieldset class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<ul>
<li>
<div class="checkbox">
<input type="button" value=".option1" name="option1" id="option1" />
</div>
</li>
<li>
<div class="checkbox">
<input type="button" value=".option2" name="option2" id="option2" />
</div>
</li>
</ul>
</div>
<div class="row-section ">
<div class="row-heading">ceramics</div>
<ul>
<li>
<div class="checkbox">
<input type="button" value=".option1" name="option1" id="option1" />
</div>
</li>
<li>
<div class="checkbox">
<input type="button" value=".option2" name="option2" id="option2" />
</div>
</li>
</ul>
</div>
</fieldset>
JS:
$(document).ready(function () {
$("input:checked").click(function () {
var clickedText = $(this).text();
$(".row-section").filter(function () {
return $(this).find("div").text() === clickedText;
}).toggle();
});
});
最佳答案
fork fiddle :http://jsfiddle.net/ru8YL/1/
我创建了一个新的选择器来获取与复选框一致的标签文本:$(this).siblings('label').text()
。
选择所有复选框而不是您之前使用的按钮:$("input:checkbox")
。
使用change
事件而不是click
。
使用.is(':checked')
查看复选框是否被选中。
发送toggle
参数来告诉它隐藏或显示。第二个参数在文档中指定:http://api.jquery.com/toggle/
$("input:checkbox").change(function () {
var clickedText = $(this).siblings('label').text();
console.log(clickedText);
$(".row-section").filter(function () {
return $(this).find("div.row-heading").text() === clickedText;
}).toggle(this.checked);
});
关于javascript - 获取复选框以仅基于复选框标签内的字符串切换 div - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23818200/