Home > Article > Web Front-end > How to set initial value for bootstrap-switch
How to set initial value for bootstrap-switch
- angryTomOriginal
- 2019-08-01 13:48:494518browse
bootstrapSwitch is a very beautiful switching control, and its introduction on the official website is also very detailed. Let’s quickly get started with bootstrapSwitch through several demos.
If you want to know more about bootstrap, you can click: bootstrap tutorial
First, quote the corresponding js and css files, put the checkbox into the div with class "switch", and then initialize
$('#mySwitch input').bootstrapSwitch();
in js to use bootstrapSwitch.
Input has two attributes data-on-text and data-off-text, which are the text displayed when switching, respectively. Here they are set to YES and NO . The code is as follows:
this is a bootstrap-switch test
bootstrapSwitch({attribute:value}) Modify attributes. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is a bootstrap-switch test</title>
<script src="jquery-2.2.4.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>
<script type="text/javascript">
$(function(){
$('#mySwitch input').bootstrapSwitch({
onText:'On',
offText:'Off'
});
})
</script>
</head>
<body>
<br>
<div id="mySwitch">
<input type="checkbox" checked data-on-text="YES" data-off-text="NO"/>
</div>
</body>
The above is the detailed content of How to set initial value for bootstrap-switch. For more information, please follow other related articles on the PHP Chinese website!