文本匹配

在表单输入项里面输入值，根据输入值，点击判断按钮，让对应的复选框选中

<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>

最新文章

  1. 如何通过ArcMap Add-in机制实现十字叉线地理配准工具
  2. HTML入门教程
  3. ios开发之网络php
  4. HBase的快照技术
  5. C#特性学习笔记二
  6. nodejs安装及环境配置
  7. jQuery对象与Dom对象的相互转换
  8. android binder机制之——（创建binder服务）
  9. select中option的onclick事件失效
  10. Converting PDF to Text in C#
  11. Hadoop记录- Yarn Job MAX
  12. JavaSE基础知识（5）—面向对象（5.6 static关键字）
  13. Codeforces Round #529 (Div. 3) C. Powers Of Two(数学？？？？)
  14. jQuery 常用效果
  15. CF 554B 找相同行
  16. SQL Server 附加数据库提示5120错误
  17. Safari 不能播放Video ,Chrome等可以 问题解决。
  18. ElasticSearch：集群(Cluster),节点(Node),分片(Shard),Indices(索引),replicas(备份)之间关系
  19. js动态添加和删除标签
  20. 多线程学习-基础（ 十）一个synchronized(){/*代码块*/}简单案例分析

热门文章

  1. jndi理解
  2. leetcode 181 Employees Earning More Than Their Managers 不会分析的数据库复杂度
  3. Unity Resources.Load
  4. tcp的半连接与完全连接队列（三）源码分析
  5. LeetCode 110.平衡二叉树（C++）
  6. 打开/关闭网卡无线WIFI模块
  7. 如何在smarty模板中执行php代码
  8. React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作
  9. GitKraken使用教程-基础部分(6)
  10. 将Android工程打成jar包之后对资源的调用。