Jquery(九)表单元素过滤

来源：互联网发布：美颜拍照软件编辑：程序博客网时间：2024/05/21 10:17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>jQuery过滤器 表单属性过滤</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>  <script type="text/javascript">    $(document).ready(function(){        //手动重置        $("#but").click(function(){            $("*").removeAttr("style");        });        //<input type="button" id="but2" value="改变表单内可用‘input’元素背景色为红色"/>        $("#but2").click(function(){            $("#form1 input:enabled").css("background","red");        });        //<input type="button" id="but3" value="改变表单内不可用‘input’元素背景色为红色"/>        $("#but3").click(function(){            $("#form1 input:disabled").css("background","red");        });        //点击一次 调用一次        $(":checkbox").click(countCheckBox);        //统计复选框选中的个数        function countCheckBox(){            //统计选中的个数            var n=$("input:checked").length;            //把统计的个数添加到div中            $("div").eq(0).html("<strong>你选中了"+n+"个</strong>");        }        //调用函数        countCheckBox();        //操作下拉框        $("select").change(function(){            //声明一个存储变量            var str="";            $("select option:selected").each(function(){                str+=$(this).text()+",";            });            //把选中的内容添加到div中            $("div").eq(1).html("<strong>你选中是"+str+"</strong>");        }).trigger('change');//trigger('change')当select加载完毕 就调用该函数  也可以使用change()代替    });  </script> </head> <body>  <input type="button" id="but" value="手动重置"/> <input type="button" id="but2" value="改变表单内可用‘input’元素背景色为红色"/> <input type="button" id="but3" value="改变表单内不可用‘input’元素背景色为红色"/>  <form id="form1" action="#">    <p>可用的文本框<input type="text" value="可用的文本"/></p>    <p>不可用的文本框<input type="text" value="不可用的文本" disabled="disabled"/></p>    <p>可用的文本框<input type="text" value="可用的文本"/></p>    <p>不可用的文本框<input type="text" value="不可用的文本" disabled="disabled"/></p>    <p>        <input type="checkbox" name="newName" value="test1"/>test1        <input type="checkbox" name="newName" value="test2"/>test2        <input type="checkbox" name="newName" value="test3"  checked="checked"/>test3        <input type="checkbox" name="newName" value="test3"/>test4        <input type="checkbox" name="newName" value="test4" checked="checked"/>test5        <input type="checkbox" name="newName" value="test5"/>test6    </p>    <!--把统计选中的复选框的结果 放在div中-->    <div></div>    <br/>    下拉框1    <select>        <option>java</option>        <option>c++</option>        <option>网络</option>        <option>.net</option>    </select>    <p></p>    下拉框2    <select>        <option>java</option>        <option>c++</option>        <option>网络</option>        <option>.net</option>    </select>    <br/>    <!--把选择的结果 放在div中-->    <div></div>  </form> </body></html>
0 0