jquery中表单 多选框的一种巧妙写法

jQuery是一种快速、简洁的JavaScript库，专为简化HTML文档遍历、事件处理、动画设计和Ajax交互而设计。在网页开发中，使用jQuery可以大大简化开发过程。

在jQuery中，表单元素是常用的组件之一。其中，多选框控件是一种常见的表单元素，通常用于实现多选功能。下面，我们将介绍一种巧妙的多选框控件的写法。

原理

这种多选框控件的实现原理很简单。使用HTML的<input>标签创建多选框控件，然后使用jQuery给该控件添加change事件，在该事件中实现控件的状态更新操作。

示例1

以下是一种实现方式的示例代码：

<input type="checkbox" class="check" name="fruit" value="apple">苹果
<input type="checkbox" class="check" name="fruit" value="orange">橘子
<input type="checkbox" class="check" name="fruit" value="pear">梨子
<input type="checkbox" class="check" name="fruit" value="banana">香蕉

<script>
$(document).ready(function() {
    $('.check').on('change', function() {
        var fruitList = '';
        $('.check:checked').each(function() {
            fruitList += $(this).val() + ' ';
        });
        $('p').text(fruitList);
    });
});
</script>

<p></p>

上面的代码中，我们创建了四个多选框控件，并使用jQuery给它们添加了change事件。当用户勾选或取消选项时，change事件会触发，并执行其中的回调函数。

回调函数首先使用$('.check:checked')选择所有被选中的多选框控件，然后使用each遍历这些控件，并将它们的值拼接成一个字符串，最后将字符串显示在<p>标签中。

这种方法的优点是简单易懂，代码量少。

示例2

以下是另一种实现方式的示例代码：

<input type="checkbox" class="check-all">全选
<input type="checkbox" class="check-item" name="fruit" value="apple">苹果
<input type="checkbox" class="check-item" name="fruit" value="orange">橘子
<input type="checkbox" class="check-item" name="fruit" value="pear">梨子
<input type="checkbox" class="check-item" name="fruit" value="banana">香蕉

<script>
$(document).ready(function() {
    // 全选按钮
    $('.check-all').on('click', function() {
        if ($(this).is(':checked')) {
            $('.check-item').prop('checked', true);
        } else {
            $('.check-item').prop('checked', false);
        }
    });
    // 单选按钮
    $('.check-item').on('click', function() {
        if ($('.check-item:checked').length == $('.check-item').length) {
            $('.check-all').prop('checked', true);
        } else {
            $('.check-all').prop('checked', false);
        }
    });
});
</script>

上面的代码中，我们创建了一个全选按钮和四个单选按钮，并使用jQuery给它们分别添加了click事件。当用户点击全选按钮时，全选按钮的状态会同步到所有单选按钮上；当用户点击单选按钮时，单选按钮的状态会影响全选按钮的状态。

其中，$('.check-all').is(':checked')用于判断全选按钮的当前状态；$('.check-item:checked').length == $('.check-item').length用于判断所有单选按钮是否均被选中。

这种方法的优点是易于扩展和维护，适用于大规模的多选框控件。