javascript - 如何获取 DOM 中附近节点上的 ？

Question

我正在尝试编写一些可以在我的应用程序中使用的 JavaScript，并允许复选框显示/隐藏附近的元素。

如果我有这些元素:

<div class="optionable" style="display: block;">
    <div class="row">
        <div class="col-md-2">
            <input checked="checked" class="form-control" 
                data-val="true" id="IsActive" 
                name="IsActive" 
                onclick="CheckboxOptionsToggle(this);" 
                type="checkbox" value="true">
        </div>
        <div class="col-md-8">
            Chapter
        </div>
    </div>
    <div class="row options">
        <div class="col-md-12">
            Some data here...
        </div>
    </div>
</div>

这个脚本:

CheckboxOptionsToggle = function (thisCheckbox) {
    debugger;
    var optionElement = $('.options');
    if (thisCheckbox.checked) {
        $(thisCheckbox).closest(optionElement).show();
    } else {
        $(thisCheckbox).closest(optionElement).hide();
    }
}

但这不起作用。我希望带有 onclick="CheckboxOptionsToggle(this);" 的复选框触发同一 optionable div 中的 options 元素以显示或隐藏。

我的 JavaScript/jQuery 做错了什么？

更新:这是我的最终解决方案:

$('.optionToggle').on('change', function () { 
    $(this).closest('.optionable').find('.options').toggle(this.checked);
});
$(document).ready(function () {
    var toggleElements = document.body.getElementsByClassName('optionToggle');
    for (var i = 0; i < toggleElements.length; i++) {
        var thisCheck = $(toggleElements[i]);
        thisCheck.closest('.optionable').find('.options').toggle(thisCheck.prop('checked'));
    }
});

<div class="optionable" style="display: block;">
    <div class="row">
        <div class="col-md-2">
            <input checked="checked" class="form-control optionToggle" 
                data-val="true" id="IsActive" 
                name="IsActive" 
                type="checkbox" value="true">
        </div>
        <div class="col-md-8">
            Chapter
        </div>
    </div>
    <div class="row options">
        <div class="col-md-12">
            Some data here...
        </div>
    </div>
</div>

Answer 1

更加通用，并停止使用内联事件处理程序

$('[type="checkbox"]').on('change', function() { // or use class to not attach to all

    $(this).closest('.optionable').find('.options').toggle(this.checked);

}).trigger('change');

FIDDLE