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>
    “想要越幸运,就要越努力”
  • 相关阅读:
    POJ 3368.Frequent values
    HDOJ 1166.敌兵布阵
    javaWeb之文件下载
    javaWeb之文件上传
    centos系统下忘记了root密码怎么办?
    如何在centos下挂载与卸载磁盘
    验证码生成(java版本)
    javaweb怎么过滤乱码
    mysql修改默认字段大小
    我所知道的命名方式(软件)
  • 原文地址:https://www.cnblogs.com/HollyLearning/p/5442679.html
Copyright © 2011-2022 走看看