根据指定内容选中复选框 【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>

 

posted @ 2016-04-28 14:55  HollyLearningNotes  阅读(617)  评论(0)  编辑  收藏  举报