zoukankan      html  css  js  c++  java
  • 根据指定内容选中复选框 【js读书笔记】

    用户在文本中输入制定内容与制定复选框关键词匹配时,选中该复选框

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>根据指定内容选中复选框</title>
     6     </head>
     7     <body>
     8         <h2>根据指定内容选中复选框</h2>
     9         <p>如果输入的内容中含有关键词:"西游记"、"水浒传",则相应的关键词复选框会被直接选中</p>
    10         <textarea id="contentCheckbox" data-target="autoKeywordSelect" rows="1" cols="10">
    11         </textarea>
    12         <br />
    13         <input type="checkbox" name="autoKeywordSelect" data-k='西游记'/>西游记<br />
    14         <input type="checkbox" name="autoKeywordSelect" data-k='红楼梦'/>红楼梦<br />
    15         <input type="checkbox" name="autoKeywordSelect" data-k='水浒传'/>水浒传<br />
    16         <input type="checkbox" name="autoKeywordSelect" data-k='三国演义'/>三国演义<br />
    17     </body>
    18     <script type="text/javascript">
    19         window.onload=function(){
    20             var contentCheckbox=document.getElementById("contentCheckbox");
    21             //待选中的元素
    22             var _targets=document.getElementsByName(contentCheckbox.getAttribute("data-target"));
    23             var targetsLen=_targets.length;
    24             contentCheckbox.onkeyup=function(){
    25                 for(var i=0;i<targetsLen;i++){
    26                     var _t=_targets[i],
    27                         _v=this.value;
    28                     //如果内容与复选框的关键词匹配,选中当前的复选框
    29                     //_v.search(_t.getAttribute("data-K"))!=-1?_t.checked=true:_t.checked=false; //三目元素
    30                     _t.checked=_v.search(_t.getAttribute("data-k"))!=-1 && true||false;//单链条件写法
    31                 }
    32             }
    33         };
    34     </script>
    35 </html>
    “想要越幸运,就要越努力”
  • 相关阅读:
    centos设置系统时间
    ubufntu 11.10启动不了nautilus的问题解决
    centos中用crontab定时执行java程序
    试用ubuntu里画流程图,架构图工具
    内嵌在客户端的网页出现刷新问题
    lenovo e23在ubuntu下打开无线网卡的办法
    mysql workbench for ubuntu测试
    有关Java多态
    我是程序猿,一个新的开始......
    有关数组的几种排序
  • 原文地址:https://www.cnblogs.com/HollyLearning/p/5442679.html
Copyright © 2011-2022 走看看