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

分叉小提琴：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);
});

Answer 2

$(document).ready(function () {
    $("input").change(function () {
        var isChecked = $(this).is(":checked");
    });
});

使用change事件代替click事件

Answer 3

这是我的贡献。它只是表明有很多方法可以使用jQuery表达相同的东西。

$(document).ready(function () {
    $("input:checkbox").click(function () {
        var clickedText = $(this).next('label').text();
        $("fieldset:nth-child(2) .row-section").filter(function () {
            return $('.row-heading', this).text() === clickedText;
        }).toggle($(this).is(':checked'));
    });
});

http://jsfiddle.net/LhuT9/1/

与Joe Frambach的回答相比，它的不同之处在于：

此示例使用next代替siblings
过滤功能使用$('.row-heading', this).text()代替$(this).find("div.row-heading").text()

Answer 4

又一种替代方案，虽然它只有很小的差异，但却相同：

// selects all input elements whose type is 'checkbox':
$('input[type="checkbox"]')
// binds an anonymous function to the 'change' event:
.on('change', function(){
    // caching the this variable for later use:
    var input = this,
    // finding whether node.textContent or node.innerText is supported in the browser:
        textProp = 'textContent' in document.body ? 'textContent' : 'innerText';

    // selecting the '.row-section' elements,
    $('.row-section')
    // filtering that collection:
    .filter(function(){
        // using '$.trim()' to remove leading/trailing white-space
        return $.trim($(this)
            // finding the 'div.row-heading' elements within the current '.row-section':
            .find('div.row-heading')
            // retrieving its text:
            .text())
            // comparing for strict equality:
            === 
            // finding the text of the label attached to the element
            // the benefit of this approach is that it's independent
            // of the DOM structure:
            $.trim(input.labels[0][textProp]);
    // showing if the input is checked, hiding if not:
    }).toggle(input.checked);
// triggering the change event, so the anonymous function is called on page-load:
}).change();

JS Fiddle demo

参考文献：

JavaScript的：
- HTMLInputElement, to see a brief introduction to the labels property
jQuery的：
- $.trim()。
- change()。
- find()。
- filter()。
- on()。
- text()。
- toggle()。

获取Checkbox只根据复选框标签内的字符串切换div - jQuery

4 个答案: