如何使用jQuery EasyUI设计网页上的复选框选择

下面是如何使用jQuery EasyUI设计网页上的复选框选择的完整攻略。

1. 引入jQuery和EasyUI

首先需要在页面中引入jQuery和EasyUI的js和css文件，可以从官网下载或使用CDN加速。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easyui/dist/easyui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easyui/dist/easyui.icons.css">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>

2. 创建复选框选择器

然后创建一个<div>元素，加上easyui-checkbox类来创建复选框选择器。

<div class="easyui-checkbox">
    <input type="checkbox" name="ck1" value="1" checked>选项1
    <br>
    <input type="checkbox" name="ck2" value="2">选项2
    <br>
    <input type="checkbox" name="ck3" value="3">选项3
</div>

注意，需要给每个复选框的<input>元素设置name和value属性，方便后台获取数据，并且可以设置checked属性来指定默认选中状态。

3. 获取选中的值

可以通过调用EasyUI提供的getChecked方法来获取选中的复选框的值。

var values = $('.easyui-checkbox').checkbox('getChecked');
console.log(values); // [{name: 'ck1', value: '1'}, {name: 'ck2', value: '2'}]

以上代码会输出选中的复选框的name和value属性组成的数组。

4. 手动设置选中状态

可以通过调用EasyUI提供的setChecked方法来手动设置复选框的选中状态，比如设置第一个复选框为选中状态。

$('.easyui-checkbox').checkbox('setChecked', {name: 'ck1', checked: true});

以上代码会将name属性为'ck1'的复选框的选中状态设置为true，即选中状态。

示例1：全选、全不选

下面是一个示例代码，实现了全选、全不选的功能。点击全选按钮，所有复选框都被选中；点击全不选按钮，所有复选框都被取消选中。

<div class="easyui-checkbox">
    <input type="checkbox" name="ck1" value="1">选项1
    <br>
    <input type="checkbox" name="ck2" value="2">选项2
    <br>
    <input type="checkbox" name="ck3" value="3">选项3
    <br><br>
    <a href="#" class="easyui-linkbutton" id="btn-select-all">全选</a>
    <a href="#" class="easyui-linkbutton" id="btn-deselect-all">全不选</a>
</div>

<script>
    $('#btn-select-all').click(function() {
        $('.easyui-checkbox').checkbox('checkAll');
    });

    $('#btn-deselect-all').click(function() {
        $('.easyui-checkbox').checkbox('uncheckAll');
    });
</script>

在上述代码中，使用了EasyUI提供的checkAll和uncheckAll方法来实现全选、全不选功能。点击#btn-select-all按钮，所有复选框都被选中；点击#btn-deselect-all按钮，所有复选框都被取消选中。

示例2：禁用某些选项

下面是另一个示例代码，实现了禁用第二个和第三个选项的功能。

<div class="easyui-checkbox">
    <input type="checkbox" name="ck1" value="1">选项1
    <br>
    <input type="checkbox" name="ck2" value="2">选项2
    <br>
    <input type="checkbox" name="ck3" value="3">选项3
    <br><br>
    <a href="#" class="easyui-linkbutton" id="btn-disable-ck2">禁用第二个选项</a>
    <a href="#" class="easyui-linkbutton" id="btn-disable-ck3">禁用第三个选项</a>
</div>

<script>
    $('#btn-disable-ck2').click(function() {
        $('.easyui-checkbox').checkbox('disable', {name: 'ck2', disabled: true});
    });

    $('#btn-disable-ck3').click(function() {
        $('.easyui-checkbox').checkbox('disable', {name: 'ck3', disabled: true});
    });
</script>

在上述代码中，使用了EasyUI提供的disable方法来实现禁用某些选项的功能。点击#btn-disable-ck2按钮，第二个选项被禁用；点击#btn-disable-ck3按钮，第三个选项被禁用。