• 以checked选中作为判断条件的各种写法


    <input type="radio" name="choice" id="ipt1">
    <label for="ipt1">弹出1</label>
    <input type="radio" name="choice" id="ipt2">
    <label for="ipt2">弹出2</label>
    <input type="button" value="确定" id="confirm">

    首先参考attr与prop的区别:

    attr 读取DOM节点属性,当页面渲染完,checked属性就确定了。

    prop 读取HTML元素属性,checked属性可以改变。

    以下为错误示例:

    //错误:使用attr判断,在上面的html中未选中,得到的是false;
    $('#confirm').click(function(){
        if($('#ipt1').attr('checked')){
             alert(1);
        }else{
             alert(2);
        }
    });
    
    //错误:JS与jquery混写,jQuery中没有.checked属性,得到的是false;
    $('#confirm').click(function(){
        if($('#ipt1').checked){
             alert(1);
        }else{
             alert(2);
        }
    });
    
    //错误:判断的是jQuery中$('#ipt1:checked')选择器是否存在,得到的是true;
     $('#confirm').click(function(){
        if($('#ipt1:checked')){
             alert(1);
        }else{
             alert(2);
        }
    });

    以下为正确示例:

    //正确:jQuery用is方法传入:checked伪类选择器。
     $('#confirm').click(function(){
        if($('#ipt1').is(":checked")){
             alert(1);
        }else{
             alert(2);
        }
    });
    
    //正确:用prop读取HTML元素属性。
    $('#confirm').click(function(){
        if($('#ipt1').prop('checked')){
             alert(1);
        }else{
             alert(2);
        }
    });
    
    //正确:JS写法。  
    var confirm=document.getElementById('confirm');
    confirm.onclick = function(){
        var oIpt1=document.getElementById('ipt1');
        if(oIpt1.checked == true){
            alert(1);
        }else{
             alert(2);
        }
    };
  • 相关阅读:
    angular学习(五)-- Module
    angular学习(四)-- Controller
    angular学习(三)-- $scope
    angular学习(二)-- Directive
    实用css小技巧
    Windows下WebStorm使用SVN(转)
    接口和转码,禁止百度转码
    RGB网页颜色在线取色器
    Java操作Excel文件导入
    设置某指定gridcolumn不可排序:
  • 原文地址:https://www.cnblogs.com/nicoleyani/p/5956259.html
Copyright © 2020-2023  润新知