• 技术文章 >web前端 >js教程

    jquery处理checkbox复选框是否被选中实例代码分享

    小云云小云云2018-01-10 09:20:41原创649
    本文主要介绍了jquery处理checkbox(复选框)是否被选中实例代码的相关资料,需要的朋友可以参考下,希望能帮助到大家。

    jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行

    要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替

    实例代码:


    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8"/>
    <title>checkbox</title>
    </head>
    <body>
    
    <input type="button" id="btn1" value="全选">
    <input type="button" id="btn2" value="取消全选">
    <input type="button" id="btn3" value="选中所有奇数">
    <input type="button" id="btn4" value="反选">
    <input type="button" id="btn5" value="获得选中的所有值">
    
    <input type="checkbox" value="checkbox1"/>
    <input type="checkbox" value="checkbox2"/>
    <input type="checkbox" value="checkbox3"/>
    <input type="checkbox" value="checkbox4"/>
    <input type="checkbox" value="checkbox5"/>
    
    <script src="js/jquery-3.2.0.min.js"></script>
    <script>
    $(function(){
    
    var checkbox = $("input[type=checkbox]");
    
    $("#btn1").on("click",function(){
    checkbox.prop("checked",true);
    });
    
    $("#btn2").on("click",function(){
    checkbox.prop("checked",false);
    });
    
    $("#btn3").on("click",function(){
    $("input[type=checkbox]:even").prop("checked",true);
    });
    
    $("#btn4").on("click",function(){
    checkbox.each(function(){
    if($(this).prop("checked")){
    $(this).prop("checked",false);
    }else{
    $(this).prop("checked",true);
    }
    });
    });
    
    $("#btn5").on("click",function(){
    var str = "";
    $("input[type=checkbox]").each(function(){
    if($(this).prop("checked")){
    str += $(this).val() + ",";
    }
    
    });
    console.log(str);
    });
    
    });
    </script>
    
    
    </body>
    </html>

    相关推荐:

    html中input框中的radio是否被选中的判断

    总结jquery判断复选框是否被选中实例

    jquery判断单个复选框是否被选中的代码_jquery

    以上就是jquery处理checkbox复选框是否被选中实例代码分享的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:checkbox jquery 复选框
    上一篇:ajax实现服务器与浏览器长连接的功能 下一篇:jQuery Json高亮插件json-viewer.js使用方法详解
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 什么是消息队列?node中如何使用消息队列?• 18个常见angular面试题(附答案分析)• JavaScript的Symbol类型、隐藏属性及全局注册表详解• 浅析IDEA中如何开发Angular• 整理总结JavaScript常见的BOM操作
    1/1

    PHP中文网