JQuery 过滤选择器 与属性修改的方法演示比较
程序员文章站
2022-03-13 11:16:42
文本匹配 在表单输入项里面输入值,根据输入值,点击判断按钮,让对应的复选框选中 获取复选框状态 点击按钮,获取复选框状态为选中的个数,并将结果弹出在页面 基础页面效果如下: 属性更改 当复选框被选中时,复选框对应的文本颜色为红色; 当复选框未被选中时,复选框对应的文本颜色为黑色; 基础页面效果如下: ......
文本匹配
在表单输入项里面输入值,根据输入值,点击判断按钮,让对应的复选框选中
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> </head> <body> 请输入城市:<input type="text" id="id"/> <br/><br/> 城市复选框: <div style="width:200px;background:red;"> <input type="checkbox" name="love" value="北京"/>北京 <input type="checkbox" name="love" value="南京"/>南京 <input type="checkbox" name="love" value="上海"/>上海 </div> <br/><br/> <input type="button" value="判断" onclick="checkCity()"/> <!-- 思路一--> <script type="text/javascript"> function checkCity(){ var city= $("#id").val(); alert(city); $("input[name=love]").each(function(index,element){ if(element.value==city){ alert("just it"); // 以下四种方法都行 // $(element).prop("checked",true); $(element).attr("checked",true); // $(element).prop("checked","checked"); // $(element).attr("checked","checked"); } }) } </script> <!-- 思路二--> <script type="text/javascript"> function checkCity(){ $("input[name=love").prop("checked",false); var city= $("#id").val(); $("input[value="+city+"]").prop("checked",true); } </script> </body> </html>
获取复选框状态
点击按钮,获取复选框状态为选中的个数,并将结果弹出在页面
基础页面效果如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> </head> <body> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> <input type="checkbox" name="ck" /> <input type="button" value="提交"/> </body> <script type="text/javascript"> // 方法一 // $(function(){ // var i=0; // $("input[type=button]").click(function(){ // $("input[type=checkbox]").each(function(index,element){ // //这里使用attr就不行 // alert($(element).prop("checked")); // if($(element).prop("checked")==true){ // i++; // } // }); // alert(i); // }); // }); // 方法二 // $(function(){ // var i=0; // $("input[type=button]").click(function(){ // $("input[type=checkbox]:checked").each(function(index,element){ // i++; // }); // alert(i); // }); // }); // 方法三 $(function(){ var i=0; $("input[type=button]").click(function(){ alert($("input[type=checkbox]:checked").length); }); }); </script> </html>
属性更改
当复选框被选中时,复选框对应的文本颜色为红色;
当复选框未被选中时,复选框对应的文本颜色为黑色;
基础页面效果如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> </head> <body> <table border="1"> <tr> <td><input type="checkbox" class="ck" /> <font >Data1</font></td> </tr> <tr> <td><input type="checkbox" class="ck" /><font >Data2</font></td> </tr> <tr> <td><input type="checkbox" class="ck" /><font >Data3</font></td> </tr> </table> <script type="text/javascript"> $(function(){ for(var i=0;i<$(".ck").length;i++){ // 这里注意取数组元素后不是JQuery对象了,要在穿上马甲才能使用click()属于JQuery方法 $($(".ck")[i]).click(function(){ alert(); if($(this).prop("checked")==true){ $(this).next().css("color","red"); }else{ $(this).next().css("color","black"); } }); } // for(var i = 0; i < ck.length; i++) { // $(ck[i]).click(function() { // // //获取复选框的选中状态 // var cked = $(this).prop("checked"); // // //如果选中 // if(cked == true) { // // //将第二个单元格内的文本字体变红色 // $(this).next().prop("color", "red"); // } else { // //将第二个单元格内字体变黑色 // $(this).next().prop("color", "black") // } // }) // $("input[type=checkbox]:eq(2)").click(function(){ // if($("input[type=checkbox]:eq(2)").prop("checked")==true){ // $("font:eq(2)").css("color","red"); // }else{ // $("font:eq(2)").css("color","black"); // } // }); }) </script> </body> </html>
div显示&隐藏
获取所有隐藏div,让隐藏div显示,并且改变背景颜色,点击关闭按钮,所有div恢复到初始状态
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <style type="text/css"> .diveven { background:#bbffaa;} </style> </head> <body> <div style="width:100px;height:100px;border:1px solid;display:none">中国万岁</div> <div style="width:100px;height:100px;border:1px solid;display:none">世界万岁</div> <div style="width:100px;height:100px;border:1px solid;">宇宙万岁</div> <input type="button" value="显示并且变颜色" onclick="showContent();"/> <input type="button" value="关闭" onclick="closeContent();"/> <script type="text/javascript"> // 方法一 // function showContent(){ // $("div[style*=none]").each(function(index,element){ // $(element).css("display","block").css("background-color","red"); // }); // } // function closeContent(){ // $("div[style*=disp]").each(function(index,element){ // $(element).css("display","none"); // }); // } // 方法二 function showContent(){ $("div:hidden").show(2000).addClass("diveven"); } function closeContent(){ $("div:lt(2)").hide().removeClass("diveven"); } </script> </body> </html>
上一篇: 2018.3.30 边框应用与导航栏设置