zoukankan      html  css  js  c++  java
  • 常见jquery问题

      这里将会总结一些单选框,复选框,文本域之类的问题

      【复选框实现单选】

    $("input[name='E_IndustrySector']").click(function () {
    
                    // 取消全部checkbox的选中
    
                    $("input[name='E_IndustrySector']").prop("checked", false);
    
                    // 设置选中当前
    
                    $(this).prop("checked", true);
    
                });

      【单选框实现性别选择】

    <div class="radio-div">
                            <div style=" 100px; float: left;">
                                <input name="E_Gender" type="radio" value="男" id="man">
                                <label class="checked"><em></em><span></span></label>
                            </div>
                            <div style=" 100px; float: left;">
                                <input name="E_Gender" type="radio" value="女" id="woman">
                                <label><em></em><span></span></label>
                            </div>
                            <input id="E_Gender" name="E_Gender" type="hidden" value="男">
                        </div>
    $(".radio-div label").click(function () {
                    var radio = $(".radio-div label");
                    var a = $(this)[0].innerText;
                    if (a == "男") {
                        $(radio[0]).addClass("checked");
                        $(radio[1]).removeClass("checked");
                    } else {
                        $(radio[0]).removeClass("checked");
                        $(radio[1]).addClass("checked");
                    }
                    $(".radio-div #E_Gender").val(a);
                    var b = $(".radio-div #E_Gender").val();
                    console.log(b);
                });

      【将数据库中用逗号分隔的字符转化成复选框的选项】

    $("[name='E_IndustrySector']").each(function () {
                if (row.E_IndustrySector != null) {
                    if (row.E_IndustrySector.indexOf($(this).val()) > -1) {
                        $(this).attr('checked', true)
                    }
                }
            })

      【在div中插入图片】

    if (row.E_ImgUrl != null) {
                
                html = "<img id='myImg' src='" + row.E_ImgUrl + "' style='100%;height:100%'>";
            } else {
                html = "<img id='myImg' src='" + defaultUrl + "' style='100%;height:100%'>";
            }
            $("#imgDiv").html(html);

      【验证邮箱和联系方式】

    var mailstr = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
    
    var isMobile = /^(?:13d|15d)d{5}(d{3}|*{3})$/;
            var isPhone = /^((0d{2,3})-)?(d{7,8})(-(d{3,}))?$/;
    
    //判断联系方式是否正常
    if (!isMobile.test(contact) && !isPhone.test(contact)) 

      【实现禁用输入框,文本域,radio】

      直接在html元素尾部添加 disabled

    记录编程的点滴,体会学习的乐趣
  • 相关阅读:
    SpringBoot之集成slf4j日志框架
    Maven项目优势
    Idea操作技巧
    Nginx服务器之负载均衡策略(6种)
    Git操作规范
    Mybatis之Tk
    MyEclipse取消验证Js的两种方法
    文件异步上传,多文件上传插件uploadify
    EasyMock的使用
    jquery 中post 、get的同步问题,从外部获取返回数据
  • 原文地址:https://www.cnblogs.com/AduBlog/p/13438700.html
Copyright © 2011-2022 走看看