Javascript 如何获得<；部门>；在DOM中的附近节点上？

我正在尝试编写一些可以在整个应用程序中使用的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>

但这不起作用。我希望带有

onclick=“checkboxoptions切换（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>

$（'.optionToggle'）。在（'change'，函数（）{
$（this）.closest（'.optionable'）.find（'.options'）.toggle（this.checked）；
});
$（文档）.ready（函数（）{
var-toggleElements=document.body.getElementsByClassName（'optionToggle'）；
对于（var i=0；i

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

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

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

}).trigger('change');

---

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

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

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

}).trigger('change');

您可以像

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

你可以像这样改变它

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

---

我会远离.closes，因为它非常具体，相反，我会使用更多可重用代码，如下所示：

HTML:

<input type="checkbox" id="toggler" data-target-class="some-div" class="toggler" value="myValue" checked> Toggle Me
<div class="some-div">
  Some Text within the div.
</div>

JSFiddler：

---

我使用复选框上的数据元素指定要显示或隐藏的div。这使我不仅可以隐藏/显示div，还可以隐藏/显示页面中的任何内容，不仅可以隐藏/显示一个实例，还可以根据需要隐藏/显示任意多个实例。更加灵活-仍然做同样的工作。

我会远离.closes，因为它非常具体，相反，我会使用更多可重用代码，如下所示：

HTML:

<input type="checkbox" id="toggler" data-target-class="some-div" class="toggler" value="myValue" checked> Toggle Me
<div class="some-div">
  Some Text within the div.
</div>

JSFiddler：

---

我使用复选框上的数据元素指定要显示或隐藏的div。这使我不仅可以隐藏/显示div，还可以隐藏/显示页面中的任何内容，不仅可以隐藏/显示一个实例，还可以根据需要隐藏/显示任意多个实例。更加灵活-仍然做同样的工作。

我喜欢并选择了这个，因为如果有多个

可选的
它仍然有效。谢谢。接下来的问题是，切换项目以匹配页面加载时的复选框的好方法是什么？我尝试添加一个类似的JavaScript函数，如下所示：
$（'.optionToggle'）.on（'onload'，function（）{…
），但它没有被触发。只需添加
.trigger（'change'）
最后，我会更新答案。我喜欢并选择了此选项，因为如果有多个
可选项
，它仍然有效。谢谢。接下来的问题是，在页面加载时切换项目以匹配其复选框的好方法是什么？我尝试添加类似的JavaScript函数：
$（'.optionToggle'）。on（'onload'，function（）{…
但它没有被触发。只需在
.trigger（'change'）上加上一个按钮，我会在最后更新答案。