Jquery UI 按钮（Button） - 复选框

通过 button 部件把复选框显示为切换按钮样式。与复选框相关的 label 元素作为按钮文本。

本实例通过在一个公共的容器上调用 .buttonset()，演示了三个显示为按钮样式的复选框。

切换

B I U

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮（Button） - 复选框</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#check" ).button();
    $( "#format" ).buttonset();
  });
  </script>
  <style>
  #format { margin-top: 2em; }
  </style>
</head>
<body>
 
<input type="checkbox" id="check"><label for="check">切换</label>
 
<div id="format">
  <input type="checkbox" id="check1"><label for="check1">B</label>
  <input type="checkbox" id="check2"><label for="check2">I</label>
  <input type="checkbox" id="check3"><label for="check3">U</label>
</div>
 
 
</body>
</html>

按钮（Button） - 复选框

源代码