javascript - Bootstrap 开关切换 - 使用复选框和 jQuery 一个打开,另一个关闭

标签 javascript php jquery twitter-bootstrap

帮助我使用复选框和 jQuery 进行 Bootstrap 开关切换 - 一个打开,另一个关闭。

<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" onclick="change_ins(1)" class="switch switch-on toggle" checked value="true" id="toggle1">
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" onclick="change_ins(2)" class="switch switch-off toggle" id="toggle2">
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" onclick="change_ins(3)" class="switch switch-off toggle" id="toggle3">
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" onclick="change_ins(4)" class="switch switch-off toggle" id="toggle4">
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" onclick="change_ins(5)" class="switch switch-off toggle" id="toggle5">

最佳答案

$(".toggle123").change(function() { 
		var tid= this.id;
		
   if ($(this).is(":checked")) {
	    $('.toggle123').each(function() {
    if(this.id != tid){ $("#"+this.id).bootstrapToggle('off'); }
});
      /* $(".toggle").bootstrapToggle('off');
	  */
	  
  } 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>

<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" class="switch switch-on toggle toggle123"  id="toggle1">
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" class="switch switch-off toggle toggle123" id="toggle2">

<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" class="switch switch-off toggle toggle123" id="toggle3">

<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" class="switch switch-off toggle toggle123" id="toggle4">

<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="&#8203;" data-off="&#8203;" class="switch switch-off toggle toggle123" id="toggle5">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

关于javascript - Bootstrap 开关切换 - 使用复选框和 jQuery 一个打开,另一个关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47691853/

相关文章:

jquery - Blueimp/Jquery 每个文件的文件上传进度条

javascript - 在 Sails JS 中使用下划线/lodash 作为模板引擎

javascript - Safari 中的 Google Adsense、CORS 和 Rails 转储了数千个控制台错误

php - 对于每个输出(sql)一个不同的类

javascript - 编辑器数据表 : Not Working

javascript - jQuery - 使用 .hover 而不是 .click

javascript - 我的 HTML Div 元素在页面加载时立即消失

javascript - 将 Flex/Flash 交叉编译为 Javascript

javascript - 在 PHP 或 JS 中自动从文本和默认图像创建图像文件?

php - 在 php 中显示 GMT 时区