EasyUI jQuery checkbox widget

EasyUI jQuery checkbox widget完整攻略

EasyUI jQuery checkbox widget是一款基于jQuery的复选框控件，可以实现复选框的单个或批量选中、取消选中、获取选中值等基本操作，并且支持自定义样式、事件等操作。

引入EasyUI和jQuery库

在项目中引入EasyUI和jQuery的库文件，可以通过官网下载或者CDN引入。例如：

<!-- EasyUI核心库 -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<!-- jQuery库 -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用EasyUI复选框控件

基本用法

EasyUI jQuery checkbox widget的基本用法非常简单，只需要在HTML代码中定义一个checkbox元素，并在JavaScript代码中调用EasyUI的checkbox方法即可。例如：

<input id="easyuiCheckbox" class="easyui-checkbox" type="checkbox" name="ck" value="ck1" />

$('#easyuiCheckbox').checkbox({
  checked: true,
  onChange: function(e) {
    console.log('checkbox is checked: ' + $(this).prop('checked'));
  }
});

此时就可以在网页中看到一个默认选中的复选框控件，并且当复选框状态发生变化时，会输出相应的日志信息。

自定义样式

EasyUI jQuery checkbox widget支持自定义样式，可以通过CSS来实现。例如：

.my-checkbox {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #fff;
}

.my-checkbox .checkbox-inner {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 2px;
}

.my-checkbox .checkbox-checked .checkbox-inner {
  background-color: #0070c0; /* 选中时的背景色 */
  border-color: #0070c0; /* 选中时的边框色 */
}

<input id="myCheckbox" class="easyui-checkbox my-checkbox" type="checkbox" name="ck" value="ck1" />

$('#myCheckbox').checkbox({
  checked: true,
  onChange: function(e) {
    console.log('checkbox is checked: ' + $(this).prop('checked'));
  }
});

此时就可以在网页中看到一个自定义样式的复选框控件，并且当复选框状态发生变化时，会输出相应的日志信息。

批量选中、取消选中

EasyUI jQuery checkbox widget可以同时操作多个复选框控件的选中状态，实现批量选中、取消选中。例如：

<table>
  <tr>
    <td><input id="checkbox1" class="easyui-checkbox" type="checkbox" name="ck" value="ck1" /></td>
    <td>Data 1</td>
  </tr>
  <tr>
    <td><input id="checkbox2" class="easyui-checkbox" type="checkbox" name="ck" value="ck2" /></td>
    <td>Data 2</td>
  </tr>
</table>
<button id="selectAllBtn">Select All</button>
<button id="unselectAllBtn">Unselect All</button>

$('#selectAllBtn').click(function() {
  $('input[name="ck"]').prop('checked', true);
});

$('#unselectAllBtn').click(function() {
  $('input[name="ck"]').prop('checked', false);
});

此时就可以在网页中看到一个表格和两个按钮。当点击“Select All”按钮时，表格中的两个复选框都会被选中；当点击“Unselect All”按钮时，表格中的两个复选框都会被取消选中。

总结

EasyUI jQuery checkbox widget是一个非常实用的复选框控件，它简化了复选框的操作，并且支持自定义样式、事件等操作。通过上述示例，你已经可以掌握EasyUI jQuery checkbox widget的基本用法和批量操作技巧，快来应用到你的项目中吧！