Basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>bootstrap Example of switch</title>
<link href="bt/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-switch.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="bt/js/bootstrap.min.js"></script>
<script src="js/bootstrap-switch.min.js"></script>
</head>
<body>
<div class="container">
<form action="">
<div class="form-group">
<input name="status" type="checkbox" data-size="small">
</div>
</form>
<script type="text/javascript">
$(function(){
$('[name="status"]').bootstrapSwitch({
onText:"start-up",
offText:"Stop it",
onColor:"success",
offColor:"info",
size:"small",
onSwitchChange:function(event,state){
var status = $(this).val();
if(state==true){
alert(status);
}else{
alert(status);
}
}
})
});
</script>
</div>
</body>
</html>Judgment in voist of tp
<input type="checkbox" name="status" data-size="small" data-id="{$vo.r_id}" {$vo.r_status==1?'checked':''}>Situation Description: there are multiple lines in my data list. Each line has a switch. I want to display the initial state (i.e. on and off state) of the bootstrap switch according to the status value queried by the database.
For the first time, the input tag with the checked attribute will show the open status, and the checked attribute will be removed to show the closed status.
Click to switch state
//Switching operation
$(function(){
$('[name="status"]').bootstrapSwitch({
onText:"start-up",
offText:"Stop it",
onColor:"success",
offColor:"info",
size:"small",
onSwitchChange:function(event,state){
var eid = $(this).data("id");
// alert(id);return false;
if(state==true){
//open
console.log("open");
$.post('{:url("Role/editStatus")}', {eid: eid}, function(data) {
});
}else{
//Close
console.log("Close");
$.post('{:url("Role/editStatus")}', {eid: eid}, function(data) {
});
}
}
})
});tp controller method
//modify state
public function editStatus()
{
$eid = input("eid");
//Get the status value of the state to be modified first
$status = Db::name("role")
->where(['r_id'=>$eid])
->value('r_status');
if ($status == 1) {
//Status changed to off
$res = Db::name("role")
->where(['r_id'=>$eid])
->update(['r_status'=>0]);
return 1;
} elseif ($status == 0) {
//Status changed to on
$res = Db::name("role")
->where(['r_id'=>$eid])
->update(['r_status'=>1]);
return 1;
}
}