复选框操作js插件xcheck.js

最新推荐文章于 2024-04-17 08:53:43 发布
最新推荐文章于 2024-04-17 08:53:43 发布
阅读量282 收藏
点赞数
文章标签： javascript python json ViewUI
原文链接：https://my.oschina.net/u/2391658/blog/1093901
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

演示地址：http://www.qietu.com/p/XCheck/ 

源码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="http://www.qietu.com/p/XCheck/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="http://www.qietu.com/p/XCheck/template.js" type="text/javascript"></script>
    <script src="http://www.qietu.com/p/XCheck/XCheck.js" type="text/javascript"></script>
</head>

<body>

    <fieldset>
        <legend style="color:#f00;">场景一（多页情况下保持选择时）：</legend>
        <div>
            <input style="width:100%;height:100px;" class="xcheckgroup1 xcheckValue" readonly="readonly" />

            <div>
                <input type="button" class="xcheckgroup1 checkAll" value="全选所有" />
                <input type="button" class="xcheckgroup1 clearCheck" value="清空所有" />
                <input type="button" class="xcheckgroup1 reverseCheckCurrent" value="反选当页" />
                <input type="button" class="xcheckgroup1 clearCheckCurrent" value="清空当页" />
            </div>

            <hr/>

            <div id="group1Page"></div>

            <div class="pageBtn">
                <a href="javascript:void(0);" rel="1">第一页</a>
                <a href="javascript:void(0);" rel="6">第二页</a>
                <a href="javascript:void(0);" rel="11">第三页</a>
                <a href="javascript:void(0);" rel="16">第四页</a>
                <a href="javascript:void(0);" rel="21">第五页</a>
            </div>

        </div>
    </fieldset>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <fieldset>
        <legend style="color:#f00;">场景二（普通选择的情况，也就是只有单页选择）：</legend>
        <div>
            <input style="width:100%;height:100px;" class="xcheckgroup2 xcheckValue" readonly="readonly" />

            <div>
                <input type="button" class="xcheckgroup2 reverseCheckCurrent" value="反选当页" />
                <input type="button" class="xcheckgroup2 clearCheckCurrent" value="清空当页" />
            </div>

            <hr/>

            <table style="width:100%;">

                <tr>
                    <td width="5%">
                        序号
                    </td>
                    <td width="95%">
                        <label>
                            <input type="checkbox" class="xcheckgroup2 checkAllCurrent" />全选当页
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="1" />

                    </td>

                </tr>
                <tr>
                    <td>2</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="2" />

                    </td>

                </tr>
                <tr>
                    <td>3</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="3" />

                    </td>

                </tr>
                <tr>
                    <td>4</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="4" />

                    </td>

                </tr>
                <tr>
                    <td>5</td>
                    <td>
                        <input type="checkbox" class="xcheckgroup2 checkItem" value="5" />

                    </td>

                </tr>
            </table>



        </div>
    </fieldset>



    <script type="text/html" id="group1PageTemp">


        <table style="width:100%;">

            <tr>
                <td width="5%">
                    序号
                </td>
                <td width="95%">
                    <label>
                        <input type="checkbox" class="xcheckgroup1 checkAllCurrent" />全选当页
                    </label>
                </td>
            </tr>
            <tr>
                <td>{{start}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+1}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+1}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+2}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+2}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+3}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+3}}" />

                </td>

            </tr>
            <tr>
                <td>{{start+4}}</td>
                <td>
                    <input type="checkbox" class="xcheckgroup1 checkItem" value="{{start+4}}" />

                </td>

            </tr>
        </table>


    </script>




    <script type="text/javascript">
        $(function(){
            //场景一（多页情况下保持选择时）
            var xcheck1= $.XCheck({
                isKeep:true,
                groupClass:".xcheckgroup1",
                beforeCheckAll:function(){
                    console.log("beforeCheckAll");
                },
                afterCheckAll:function(){
                    console.log("afterCheckAll");
                },
                beforeCheckAllCurrent:function(){
                    console.log("beforeCheckAllCurrent");
                },
                afterCheckAllCurrent:function(){
                    console.log("afterCheckAllCurrent");
                },
                beforeCheckItem:function(){
                    console.log("beforeCheckItem");
                },
                afterCheckItem:function(){
                    var ops=xcheck1.options;
                    console.log('当前的options为：'+JSON.stringify(ops));
                    console.log("afterCheckItem");
                },
                beforeClearCheck:function(){
                    console.log("beforeClearCheck");
                },
                afterClearCheck:function(){
                    console.log("afterClearCheck");
                },
                beforeClearCheckCurrent:function(){
                    console.log("beforeClearCheckCurrent");
                },
                afterClearCheckCurrent:function(){
                    console.log("afterClearCheckCurrent");
                },
                beforeReverseCheckCurrent:function(){
                    console.log("beforeReverseCheckCurrent");
                },
                afterReverseCheckCurrent:function(){
                    console.log("afterReverseCheckCurrent");
                }
            });
            
            var page=function(start){
                start=(parseInt(start) || 1);
                var html=template("group1PageTemp",{start:start});
                $("#group1Page").html(html);
            };
            page();
            
           $("body").on("click",".pageBtn a",function(){
                page($(this).attr("rel"));
                xcheck1.initVal(xcheck1.val());
                return false;
           }); 
            
            //场景二（普通选择的情况，也就是只有单页选择）
            $.XCheck({
                groupClass:".xcheckgroup2"
            });
    
        });
    </script>

</body>
</html>

 

转载于:https://my.oschina.net/u/2391658/blog/1093901

weixin_34267123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS(JavaScript)中如何实现，复选框checkbox多选功能
qq_58341172的博客
03-01 874
当我们通过querySelectorAll()获取的类元素是一个伪数组，因此我们需要将其转化为真正的数组。arr.every()返回的是一个boolean值，指的是只要有一个元素大于50，返回true；arr.every()返回的是一个boolean值，指的是每一个元素都大于2，返回true；arr.filter()返回的是一个数组，是一个过滤器，指的是返回数字大于30的数组元素；以上代码指的是，数组中任何一个元素(item)，都被选中；Array.from(arr):将其转为数组。
xcheck插件安装到idea中
Januea的博客
10-25 246
xcheck插件安装到idea中
开发工人员必备的XCheck代码检测工具
最新发布
Python_paipai的博客
04-17 594
Xcheck（Application Security Development，应用安全开发），是一款由腾讯纯自研的静态代码分析工具，它是一款致力于检查 Web 类风险的 SAST（Static Application Security Testing，静态代码分析，无需编译）工具。工具使用纯自研的语义识别和精准模型分析技术，优势在于扫描速度快、低误报、低漏报，同时还具备灵活的扩展功能和快速提升工具的识别能力。支持6种语言：Java，PHP，Python，Node.js ，Go，C++。
js常用正则表达式check
u011756921的专栏
06-27 2156
/*  用途：检查输入的Email信箱格式是否正确  输入：strEmail：字符串  返回：如果通过验证返回true,否则返回false  */ function checkEmail(strEmail)  {     //var emailReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;      
Js校验脚本check.js
11-05
文件名check.js，里面包含“测试是否为半角下的数字”、“是否整数”、“检测数字可以带小数点”、“只能输入正整数和小数点后1位”等一系列js方法。
js动态写入check； 设置 checked； 选取,获取数据
qq_41737172的博客
01-24 5266
<div class="ie8"> <span class="span">学历：</span> <input type="hidden" class="educational" name="educational" value="{$educational}"> <input class="cbInp eduName" readonly="readonly" value="请选择">&lt...
js和css3超酷checkbox复选框美化插件
12-12
这是一款使用js和css3制作的超酷checkbox复选框美化插件。该checkbox复选框美化插件没有使用图片，纯CSS制作，它可以通过拖动来进行复选框的多选，非常方便，美化效果也是一流的。
带复选框tree树结构插件MultipleTreeSelect.js
06-01
"带复选框tree树结构插件MultipleTreeSelect.js"是一个专为这种需求设计的JavaScript插件，它允许用户在树状结构中进行多选操作，适用于网页交互中的各种场景。 MultipleTreeSelect.js 是一个基于jQuery的插件，它...
Javascript checkbox复选框动画插件特效源码.zip
11-04
本资源提供的是一款基于JavaScript实现的复选框动画插件特效源码，能够为网页中的复选框添加吸引人的视觉效果，提高用户体验。 在JavaScript中，操作复选框通常涉及DOM（Document Object Model）操作。DOM是HTML和...
漂亮jQuery单选框/复选框美化插件Labelauty.js?1.1.2.zip
07-11
漂亮jQuery单选框/复选框美化插件Labelauty.js，支持自定义灰色按钮不可点、支持input控件定义选项 直接提交后端即可获取数据还是非常方便的单选框/多选框美化JS插件，特别是在手机端使用，还是非常 适用的。
JS复选框checkbox动画特效下载.zip
11-24
这个名为"JS复选框checkbox动画特效下载.zip"的压缩包文件包含了一组使用JavaScript、CSS和HTML5编写的复选框动画特效。下面我们将深入探讨这些技术及其在实现复选框动画特效中的应用。 首先，CSS（Cascading Style...
支持select显示复选框的JS列表框插件.rar
07-10
支持select显示复选框的JS列表框插件，插件名称：dhtmlxCombo，版本 v.2.1，它包括Image Select和Check Select两种功能插件，可以帮助你在下拉框的选项中添加一幅图片，或者在下拉框中使用复选框，具体可以看codeFans.net的截图，上图是添加一幅图片到下拉框中， 下图是把复选框加入到下拉框中。
js下拉复选框控件，超经典，用了就知道了。
12-13
js下拉复选框控件，超经典，用了就知道了。
XCheck2.0注册验证JS类
02-02
演示地址 http://www.163sd.com/demo/4-check/index.htm
Check.js:表单验证库
05-13
表单验证库 Check.js ##Example //此处不能为空 <input type="text" id="ceshi" check="required;notempty"> //此处不能为空，自定义提示文字 <input type="text" check="required;notempty[msg=用户名不能为空]"> 此处不能为空；最少字符数5个 <input type="text" check="notempty[msg=用户名不能为空];minlen[val=5]"> 字符长度必须大于或等于x <input type="text" check="minlen[val=5]"> 字符长度必须小于或等于x <input type="text" check="maxlen[val=5]"> 字符长度必须小于或等于x，不能为空 <input type="text" ch
checkAll.js:jQuery检查所有复选框插件
04-29
##用法随时随心所欲，随心所欲。 < script type =" text/javascript " src =" jquery.js " > </ script > < script src =" jquery.checkAll.js " type =" text/javascript " > </ script > < form action =" # " > < input type =" checkbox " name ="" id ="" class =" check-all " > < input type =" checkbox " name ="" id ="" > < input type =" checkbox " name ="" id ="" > < input type =" checkbox " name ="" id =""
【常用 JS 插件】jQuery iCheck 复选/单选美化插件
Yuu
11-09 561
iCheck 表单复选框、单选框控件美化插件，主要作用为： 渲染并美化当前页面的复选框或单选框 响应复选框或单选框的点击事件 页面引用 CSS 部分 &lt;!-- iCheck for checkboxes and radio inputs --&gt; &lt;link rel="stylesheet" href="/static/assets/plugins/iCheck/al...
check.js
魚將.NET
10-15 1378
javascript 验证输入。
表单校验 check.js(1)
中华传奇
03-16 248
var fmtDate = /^(\d{1,4})-(\d{1,2})-(\d{1,2})\b/;    // 日期//var fmtEmail = /^[\w-\.]+@[\w-]+\.[\w-]+$/;             // Emailvar fmtEmail = /^[\w-\.]+@[\w-]+(\.[\w-]+)+$/;             // Emailvar fmtMo...
javascript控制复选框只能选取一个.
06-01
可以通过以下的代码实现控制复选框只能选取一个： HTML 代码： ```html <label> <input type="checkbox" name="option" value="1" class="option">选项1 </label> <label> <input type="checkbox" name="option" value="2" class="option">选项2 </label> <label> <input type="checkbox" name="option" value="3" class="option">选项3 </label> ``` JavaScript 代码： ```javascript const options = document.querySelectorAll('.option'); options.forEach(option => { option.addEventListener('change', () => { if (option.checked) { options.forEach(opt => { if (opt !== option) { opt.checked = false; } }); } }); }); ``` 上述代码中，我们首先获取所有的复选框元素，然后给每个复选框绑定一个 `change` 事件。当某个复选框被选中时，我们遍历所有的复选框元素，将除当前选中的复选框外的其他复选框全部设为未选中状态。这样就能保证每次只会有一个复选框被选中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值