澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

checkbox多选框实现单选效果跟radio一样,jQuery操作

新近蒙受两个微小的标题,便是一时大家采用单选radio的时候,会开掘当大家选中一个过后,再也无力回天多少个都不选了,即选中后不曾收回的法力,此时便想到了功效强大的checkbox,但她是多选,怎么工夫让他改成单选,效果跟radio一样吧,本新手就自个儿写了个小程序,代码不会细小略,独有四行。

第六章 jQuery操作表单,第六章jquery表单

  1.单行文本框的行使

皇冠国际皇冠国际 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body{ font:normal 12px/17px Arial; } div{ padding:2px; } input, textarea { width: 12em; border: 1px solid #888; } .focus { border: 1px solid #f00; background: #fcc; } </style> <!-- 引进jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); if($(this).val() ==this.defaultValue){ $(this).val(""); } }).blur(function(){ $(this).removeClass("focus"); if ($(this).val() == '') { $(this).val(this.defaultValue); } }); }) </script> </head> <body> <form action="" method="post" id="regForm"> <田野同志set> <legend>个人焦点音讯</legend> <div> <label for="username">名称:</label> <input id="username" type="text" value="名称" /> </div> <div> <label for="pass">密码:</label> <input id="pass" type="password" value="密码" /> </div> <div> <label for="msg">详细音信:</label> <textarea id="msg" rows="2" cols="20">详细音讯</textarea> </div> </田野(field)set> </form> </body> </html> View Code

  2.多撰文本框中度变化

皇冠国际皇冠国际 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font: normal 12px/17px Arial; } .msg { width: 300px; margin: 100px; } .msg_caption { width: 100%; overflow: hidden; margin-bottom: 1px; } .msg_caption span { display: block; float: left; margin: 0 2px; padding: 4px 10px; background: #898989; cursor: pointer; color: white; } .msg textarea { width: 300px; height: 80px; height: 100px; border: 1px solid #000; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var $comment = $('#comment'); //获取讨论框 $('.bigger').click(function () { //放大开关绑定单击事件 if (!$comment.is(":animated")) { //剖断是还是不是处于动画 if ($comment.height() < 500) { $comment.animate({ height: " =50" }, 400); //复位中度,在原有的功底上加50 } } }) $('.smaller').click(function () {//降低开关绑定单击事件 if (!$comment.is(":animated")) {//判定是不是处在动画 if ($comment.height() > 50) { $comment.animate({ height: "-=50" }, 400); //复位中度,在原有的根底上减50 } } }); }); </script> </head> <body> <form action="" method="post"> <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="smaller">减少</span> </div> <div> <textarea id="comment" rows="8" cols="20">多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.</textarea> </div> </div> </form> </body> </html> View Code 皇冠国际皇冠国际 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font: normal 12px/17px Arial; } .msg { width: 300px; margin: 100px; } .msg_caption { width: 100%; overflow: hidden; margin-bottom: 1px; } .msg_caption span { display: block; float: left; margin: 0 2px; padding: 4px 10px; background: #898989; cursor: pointer; color: white; } .msg textarea { width: 300px; height: 80px; height: 100px; border: 1px solid #000; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var $comment = $('#comment'); //获取钻探框 $('.up').click(function () { //向上开关绑定单击事件 if (!$comment.is(":animated")) {//判别是不是处于动画 $comment.animate({ scrollTop: "-=50" }, 400); } }) $('.down').click(function () {//向下开关绑定单击事件 if (!$comment.is(":animated")) { $comment.animate({ scrollTop: " =50" }, 400); } }); }); </script> </head> <body> <form action="" method="post"> <div class="msg"> <div class="msg_caption"> <span class="up">向上</span> <span class="down">向下</span> </div> <div> <textarea id="comment" rows="8" cols="20">多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.多创作本框高度变化.多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.多创作本框中度变化.多创作本框高度变化.多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.多创作本框中度变化.多创作本框中度变化.多创作本框高度变化.</textarea> </div> </div> </form> </body> </html> View Code

  3.复选框应用

皇冠国际皇冠国际 4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //全选 $("#金皇冠娱乐,CheckedAll").click(function () { $('[name=items]:checkbox').attr('checked', true); }); //全不选 $("#CheckedNo").click(function () { $('[type=checkbox]:checkbox').attr('checked', false); }); //反选 $("#CheckedRev").click(function () { $('[name=items]:checkbox').each(function () { //此处用JQ写法颇显啰嗦。呈现不出JQ飘逸的认为到。 //$(this).attr("checked", !$(this).attr("checked")); //直接使用JS原生代码,轻易实用 this.checked = !this.checked; }); }); //输出值 $("#send").click(function () { var str = "你选中的是:rn"; $('[name=items]:checkbox:checked').each(function () { str = $(this).val() "rn"; }) alert(str); }); }) </script> </head> <body> <form method="post" action=""> 你高兴的移位是? <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽球" />羽球 <input type="checkbox" name="items" value="乒球" />乒球 <br /> <input type="button" id="CheckedAll" value="全 选" /> <input type="button" id="CheckedNo" value="全不选" /> <input type="button" id="CheckedRev" value="反 选" /> <input type="button" id="send" value="提 交" /> </form> </body> </html> View Code 皇冠国际皇冠国际 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function(){ //全选 $("#CheckedAll").click(function(){ if(this.checked){ //假诺当前点击的多选框被入选 $('input[type=checkbox][name=items]').attr("checked", true ); }else{ $('input[type=checkbox][name=items]').attr("checked", false ); } }); $('input[皇冠国际皇冠国际,type=checkbox][name=items]').click(function(){ var flag=true; $('input[type=checkbox][皇冠体育手机版,name=items]').each(function(){ if(!this.checked){ flag = false; } }); if( flag ){ $('#CheckedAll').attr('checked', true ); }else{ $('#CheckedAll').attr('checked', false ); } }); //输出值 $("#send").click(function(){ var str="你选中的是:rn"; $('input[type=checkbox][name=items]:checked').each(function(){ str =$(this).val() "rn"; }) alert(str); }); }) </script> </head> <body> <form> 你喜欢的活动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽球"/>羽球 <input type="checkbox" name="items" value="乒球"/>乒球<br/> <input type="button" id="send" value="提 交"/> </form> </body> </html> View Code

  4.下拉框左右摘取

皇冠国际皇冠国际 6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div.centent { float: left; text-align: center; margin: 10px; } span { display: block; margin: 2px 2px; padding: 4px 10px; background: #898989; cursor: pointer; font-size: 12px; color: white; } </style> <!-- 引进jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //移到左手$('#add').click(function () { //获取选中的选项,删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左臂$('#remove').click(function () { $('#select2 option:selected').appendTo('#select1'); }); //全部移到右手$('#add_all').click(function () { //获取全体的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全体移到左侧$('#remove_all').click(function () { $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function () { //绑定双击事件 //获取全体的选项,删除并扩充给对方 $("option:selected", this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function () { $("option:selected", this).appendTo('#select1'); }); }); </script> </head> <body> <div class="centent"> <select multiple="multiple" id="select1" style="width: 100px; height: 160px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="7">选项7</option> </select> <div> <span id="add">选中增加到左臂>></span> <span id="add_all">全部充足到右臂>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px; height: 160px;"> <option value="8">选项8</option> </select> <div> <span id="remove"><<选中删除到右边手</span> <span id="remove_all"><<全部去除到左边</span> </div> </div> </body> </html> View Code

  5.表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
//<![CDATA[
        $(function () {
            //如果是必填的,则加红星标识.
            $("form :input.required").each(function () {
                var $required = $("<strong class='high'> *</strong>"); //创建元素
                $(this).parent().append($required); //然后将它追加到文档中
            });
            //文本框失去焦点后
            $('form :input').blur(function () {
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();
                //验证用户名
                if ($(this).is('#username')) {
                    if (this.value == "" || this.value.length < 6) {
                        var errorMsg = '请输入至少6位的用户名.';
                        $parent.append(''   errorMsg   '');
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append(''   okMsg   '');
                    }
                }
                //验证邮件
                if ($(this).is('#email')) {
                    if (this.value == "" || (this.value != "" && !/[email protected] .[a-zA-Z]{2,4}$/.test(this.value))) {
                        var errorMsg = '请输入正确的E-Mail地址.';
                        $parent.append(''   errorMsg   '');
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append(''   okMsg   '');
                    }
                }
            }).keyup(function () {
                $(this).triggerHandler("blur");
            }).focus(function () {
                $(this).triggerHandler("blur");
            }); //end blur


            //提交,最终验证。
            $('#send').click(function () {
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if (numError) {
                    return false;
                }
                alert("注册成功,密码已发到你的邮箱,请查收.");
            });

            //重置
            $('#res').click(function () {
                $(".formtips").remove();
            });
        })
//]]>
    </script>
</head>
<body>
    <form method="post" action="">
    <div class="int">
        <label for="username">
            用户名:</label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">
            邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">
            个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send" /><input type="reset" id="res" />
    </div>
    </form>
</body>
</html>

PS:参照他事他说加以考察文献《锋利的jQuery》

jQuery操作表单,第六章jquery表单 1.单行文本框的应用 ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...

废话非常的少说,直接代码:

复制代码 代码如下:

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:checkbox多选框实现单选效果跟radio一样,jQuery操作