个人中心
gpt4 book ai didi

jquery - 绑定(bind) onclick 事件到 bootstrap-switch

转载 作者：行者123 更新时间：2023-12-05 04:12:27 26 4
gpt4 key购买 nike

我正在构建一个表单，该表单应该根据用户所做的bootstrap-switch 选择来隐藏和显示内容。 onclick="documentFilter 事件适用于普通复选框；但是，在我初始化 bootstrap-switch 的那一刻，代码无法按预期工作。知道我遗漏了什么吗？谢谢!

<!--DEPENDENCIES-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

<!--HTML-->
<body>
    
    <div class="container">
        <label>
            <input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')"> Some caption
        </label>

        <div id="hideableDiv" class="hiddenByDefault">Some hidable content
        </div>
    </div>

</body>

<!--PAGE-SPECIFIC SCRIPT-->

<script type="text/javascript">

//Initialise BootstrapSwitch
$("[name='my-checkbox']").bootstrapSwitch();

//Unchecked on load
$(".hiddenByDefault").hide();

//document filter function
function documentFilter(trigger, target) {
    var $target = $(target);

    $(trigger).change(function () {
        $target.toggle(this.checked);
    });
}

</script>

最佳答案

如果您检查 Bootstrap Switch library 的来源您会看到它有一个 onSwitchChange 属性，您可以为其提供一个函数。切换开关时执行此功能。这具有消除对过时且丑陋的 on* 事件属性的需求的额外好处。试试这个:

$("[name='my-checkbox']").bootstrapSwitch({
  onSwitchChange: function(e, state) {
    $('#hideableDiv').toggle(state);
  }
});
.hiddenByDefault { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css" />

<div class="container">
  <label>
    <input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')">Some caption
  </label>

  <div id="hideableDiv" class="hiddenByDefault">Some hidable content
  </div>
</div>

关于jquery - 绑定(bind) onclick 事件到 bootstrap-switch，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40376850/

26 4 0
文章推荐： Bash:所有子文件夹上的 Tab 文件名完成
文章推荐： bash - 使用 Pandoc bash 将目录和子目录(递归？)中的所有 .docx 转换为 .md
文章推荐： git - "git ftp init"没有发送所有文件
文章推荐： Git 日志 : excluding commits from a specific merge
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com