• 单个和多个checkbox选中事件怎么写


    单个和多个checkbox选中事件怎么写

    一、总结

    一句话总结:

    1、checkbox的事件方法的话主要是change和click

    2、checkbox的属性判断的话主要是prop(判断checked和赋值checked)和attr(赋值checked)和is(判断checked),注意不同版本的不同用法

    1、jquery中不同版本的方法使用是否一样?

    解答:不一样,所以我们要注意版本。

    2、html中单个checkbox的点击事件使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,这句话对么?

    解答:对的,attr在1.6版本之后被改成做判断的了。

    3、jquery中如何通过prop方法获取checked属性?

    解答:用prop直接获取checked值,var aaa = $("#check").prop("checked");获取的checked返回值为boolean,选中为true,否则为flase

    4、jquery中如何获取多个checkbox的值?

    解答:选择器选中多个,然后获取每个元素的checked属性,var groupCheckbox=$("input[name='check']"); if(groupCheckbox[i].checked)

    5、jquery中attr和prop给checkbox赋值checked属性的常用两种方法?

    解答:键值对的形式,一种是赋值为true,一种是赋值为值。$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 。

    6、jquery中checkbox主要的事件是哪两个?

    解答:change和click。

    7、jquery的方法一般套在什么函数里面?

    解答:文档的ready函数里面。$(document).ready(function()。

    8、jquery中如何选中属性name值为tisaccept的input元素?

    解答:属性值加中括号,属性值里面是等号,属性的值用单引号,因为外面是双引号。$("input[name='tisaccept']")

    9、jquery或者别的语言或者框架中,同一种方法获取值和设置值的通用方式?

    解答:获取值只有键,设置值是先键后值,值一般是双引号,获取值:.prop("checked");设置值:.prop("checked","checked")。

    二、单个和多个checkbox选中事件怎么写

    1、单个checkbox的点击事件

    如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,需要的朋友可以参考下

    html:
    <input type="checkbox" name="check" id="check"  checked="checked" value="Daily" />
    <input type="checkbox" name="check"   checked="checked" value="Daily" />
    获取checked属性:

    1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase

    var aaa = $("#check").prop("checked");
    if(aaa){
        alert("选中");
     };

    2.直接调用checked属性,不过如果获取的结果是一个checkbox,则要加上.checked前加上.get(0)或者[0]才行,多个checkbox则不用。因为你用$选择出来的结果其实是个数组的形式,就算一个也是数组,你得用[]来取第几个的值。

    var aaa = $("#check").get(0).checked;
    if(aaa){
     alert("选中");
     };

    3、获取多个checkbox的值

    var groupCheckbox=$("input[name='check']");
        for(i=0;i<groupCheckbox.length;i++){
            if(groupCheckbox[i].checked){
                var val =groupCheckbox[i].value;
                alert(val );
            }
        }
    设置选中radio:
    $('#infType1').prop("checked","checked");
    //或者
    $("input[type=radio][name=infType][value=1]").prop("checked",'checked');
    说明:

    如果使用attr方法获取时:
    1、如果当前input中初始化未定义checked属性,则不管当前是否中,$(“#check”).attr(“checked”)都会返回undefined

    2、如果当前input中初始化已定义checked属性,则不管是否选中,$(“#selectAll”).attr(“checked”)都会返回checked.


    2、多个checkbox的点击事件

    $(function(){
        var s = $("input[name='check']");
        s.each(function(i) {
    //          alert(i);
                $(this).click(function(){
                    if(this.checked==true){
                          alert(this.value);
                    }
                 });
            }); 
    })

    三、jquery checkbox选中、改变状态、change和click事件

    jquery判断checked的三种方法:
    .attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
    .prop('checked'); //16+:true/false
    .is(':checked'); //所有版本:true/false//别忘记冒号

    jquery赋值checked的几种写法:
    所有的jquery版本都可以这样赋值:
    // $("#cb1").attr("checked","checked");
    // $("#cb1").attr("checked",true);
    jquery1.6+:prop的4种赋值:
    // $("#cb1″).prop("checked",true);//很简单就不说了哦
    // $("#cb1″).prop({checked:true}); //map键值对
    // $("#cb1″).prop("checked",function(){
    return true;//函数返回true或false
    });

    //记得还有这种哦:$("#cb1″).prop("checked","checked");

    checkbox click和change事件

    方法1:

    $("#ischange").change(function() { 
    alert("checked"); 
    });

    方法2:

    $(function(){ 
    if ($.browser.msie) { 
    $('input:checkbox').click(function () { 
    this.blur(); 
    this.focus(); 
    }); 
    };

    方法3:
    $("#ischange").change(function() { 
    alert("checked"); 
    }); 
    });

    方法4:

    $(function () {if ($.browser.msie) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }});

    方法5:

    $(document).ready(function()
    $("testCheckbox").change(function() { 
    alert("Option changed!"); 
    }); 
    });

    四、自己实例

    html:

     1 <head>
     2     {include file="common/headItems" /}
     3     <script>
     4         // 是否接受任务选项框事件
     5         //alert("接受任务成功");
     6         $(document).ready(function(){
     7             //alert("接受任务成功");
     8             //奇怪,这里用.tisaccept会错 因为class才是. #是id
     9             $("input[name='tisaccept']").click(function(){
    10                 //alert("接受任务成功");
    11                 var isAccept = $("input[name='tisaccept']").prop("checked");
    12                 //alert(isAccept);
    13                 if(isAccept){
    14                     alert("接受任务成功");
    15                     //$("#tisaccept").prop("checked",false);
    16                 }else{
    17                     alert("取消任务成功");
    18                     //$("#tisaccept").prop("checked",true);
    19                 }
    20             });
    21         });
    22     </script>
    23 </head>
    1 <div class="tpl-switch">
    2     <input type="checkbox"  name="tisaccept" class="ios-switch bigswitch tpl-switch-btn" {php}if($vo['tisaccept']) echo 'checked';{/php} />
    3     <div class="tpl-switch-btn-view">
    4         <div>
    5         </div>
    6     </div>
    7 </div>

    change方法应该也是可以的,选事件方法的时候就最先选click和change。

    五、测试题-简答题

    1、jquery中不同版本的方法使用是否一样?

    解答:不一样,所以我们要注意版本。

    2、html中单个checkbox的点击事件使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,这句话对么?

    解答:对的,attr在1.6版本之后被改成做判断的了。

    3、jquery中如何通过prop方法获取checked属性?

    解答:用prop直接获取checked值,var aaa = $("#check").prop("checked");获取的checked返回值为boolean,选中为true,否则为flase

    4、jquery中如何获取多个checkbox的值?

    解答:选择器选中多个,然后获取每个元素的checked属性,var groupCheckbox=$("input[name='check']"); if(groupCheckbox[i].checked)

    5、jquery中attr和prop给checkbox赋值checked属性的常用两种方法?

    解答:键值对的形式,一种是赋值为true,一种是赋值为值。$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 。

    6、jquery中checkbox主要的事件是哪两个?

    解答:change和click。

    7、jquery的方法一般套在什么函数里面?

    解答:文档的ready函数里面。$(document).ready(function()。

    8、jquery中如何选中属性name值为tisaccept的input元素?

    解答:属性值加中括号,属性值里面是等号,属性的值用单引号,因为外面是双引号。$("input[name='tisaccept']")

    9、jquery或者别的语言或者框架中,同一种方法获取值和设置值的通用方式?

    解答:获取值只有键,设置值是先键后值,值一般是双引号,获取值:.prop("checked");设置值:.prop("checked","checked")。

     
     
     
     
     
     
     
  • 相关阅读:
    Notepad++ 中如何将代码格式化
    JAVA 解析复杂的json字符串
    8. java操作mongodb——查询数据
    7.第一次使用java连接mongodb遇到的问题
    13. Intellij IDEA调试功能使用总结
    HttpClient4.5简单使用
    12.Intellij IDEA 添加jar包的三种方式
    11.IntelliJ IDEA详细配置和使用教程(适用于Java开发人员)
    10.Intellij IDEA svn的使用详解
    黑客攻克索尼影业,掌控了操作系统的未来
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9136452.html
Copyright © 2020-2023  润新知