第二种 复选框的写法

 <form method="post" action="">
        你爱好的运动是?
        <input type="checkbox" id="CheckedAll" />全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br/>
        <input type="button" id="send" value="提 交" />
    </form>
 <script type="text/javascript" src="jquery-1.7.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    (function($) {
        $('#CheckedAll').click(function() {
            $('[name=items]:checkbox').prop('checked', this.checked);
        });

        // $('[name=items]:checkbox').click(function() {
        //     var $tmp = $('[name=items]:checkbox');
        //     $('#CheckedAll').prop('checked', $tmp.length == $tmp.filter(':checked').length);
        // });

        /*思路二*/
        $('[name=items]:checkbox').click(function() {
            var flag = true;
            var $tmp = $('[name=items]:checkbox');
            $tmp.each(function(index, el) {
                if (!this.checked) {
                    flag = false;
                }
            });
            $('#CheckedAll').prop('checked', flag);
        });

    })(jQuery);
    </script>
### 实现复选框作为单选按钮 为了在 Element Plus 中实现复选框作为单选按钮的功能,可以采用两种主要策略之一: #### 方法一:模板标签式写法 这种方法涉及向表格中添加 `Radio` 单选标签来替代默认的复选框。这需要基于数据层唯一字段进行控制,确保每次只有一个选项被选中。 然而,在此场景下更推荐第二种方法,因为它不需要额外引入新的 UI 组件,并且能够保持原有样式的一致性[^2]。 #### 方法二:修改现有复选框行为 该方案旨在保留原生复选框外观的同时改变其交互逻辑,使其表现得像单选按钮一样工作。具体来说,可以通过监听选择变化并手动调用 API 来清除其他已选状态,从而达到单选的效果。 以下是具体的代码示例,展示了如何利用 Vue 和 Element Plus 的组合来完成这一目标: ```javascript // 定义一个变量用于存储当前选中的行 ID 或者索引 let currentSelectedRow = null; const handleSelectionChange = (selection, row) => { const tableRef = this.$refs.table; if(currentSelectedRow !== null && currentSelectedRow !== row){ // 清除之前的选择 tableRef.clearSelection(); // 设置新选中的项 setTimeout(() => { tableRef.toggleRowSelection(row,true); },0); } // 更新最新的选中记录 currentSelectedRow = row; }; ``` 上述 JavaScript 函数会在用户点击某一行时触发,它会先清空所有先前的选择再单独标记最新一次点击的那一行。注意这里的 `this.$refs.table` 是指向 Table 组件实例的方式,可能根据不同版本有所差异,请参照官方文档确认实际语法[^1]。 此外,还需确保 `<el-table>` 标签内绑定了相应的事件处理器属性如下所示: ```html <template> <div id="app"> <el-table ref="table" @select="handleSelectionChange"></el-table> </div> </template> ``` 通过这种方式可以在不破坏整体设计的前提下轻松转换复选框为单选模式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值