如何基于一个切换Bootstrap切换?

时间:2017-12-14 22:01:21

标签: jquery bootstrap-4

Bootstrap切换:

我想控制其他7个切换(标题为:Sunday - > Saturday)。

我无法找到根据另一个复选框的状态更改一个复选框的切换状态的正确方法。如何才能做到这一点?似乎点击事件和切换功能是不够的。

$("#check_everything").click(function() {
    if($("#check_everything").bootstrapToggle('on')) {
	$("#Sunday_content_check_all").prop('checked', true).change();
	$("#Monday_content_check_all").prop('checked', true).change();
   	$("#Tuesday_content_check_all").bootstrapToggle('on');
   	$("#Wednesday_content_check_all").bootstrapToggle('on');
   	$("#Thursday_content_check_all").bootstrapToggle('on');
   	$("#Friday_content_check_all").bootstrapToggle('on');
	$("#Saturday_content_check_all").bootstrapToggle('on');
    } 
    else {
	$("#Sunday_content_check_all").prop('checked', false).change()
	$("#Monday_content_check_all").prop('checked', false).change()
	$("#Tuesday_content_check_all").bootstrapToggle('off');
	$("#Wednesday_content_check_all").bootstrapToggle('off');
	$("#Thursday_content_check_all").bootstrapToggle('off');
	$("#Friday_content_check_all").bootstrapToggle('off');
	$("#Saturday_content_check_all").bootstrapToggle('off');
    }
});
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input  type= "checkbox" 
        checked data-toggle= "toggle" 
        id= 'check_everything' 
        name= 'check_everything'
        data-onstyle= "success" 
        data-offstyle= "warning" 
        data-size= "small"
        data-on= "Yes" 
        data-off= "No"> 

  

如果必须包含更多代码块,请添加评论。

1 个答案:

答案 0 :(得分:0)

按类而不是id引用它们。

$( "div.tumble" ).toggleClass( "bounce" );