javascript - 获取复选框以仅基于复选框标签内的字符串切换 div - jQuery

Question

我正在尝试创建一个脚本来仅基于“选中”复选框的标签来隐藏 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();
});
});

Answer 1

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);
});