javascript 给所有相同属性元素添加同一事件(javascript add the same event to all the same properties)

2020-12-05 19:32:20 阅读：205 来源： 互联网

标签：querySelectorAll javascript same event item radio input type properties

经常遇到要给 html 中所有相同属性的元素添加同一个点击事件, 这里, 我需要给所有 type 属性为 "radio" 的 input 元素添加上相同的点击事件, 具体实现的 javascript 代码如下:

// document.querySelectorAll("input[type='radio']")是获取网页上所有type属性为radio的input元素
document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

参考资料: https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/#:~:text=In%20JavaScript%20you%20add%20an%20event%20listener%20to,%28%29%20on%20multiple%20elements%20at%20the%20same%20time%3F

　　　　 https://stackoverflow.com/questions/40956717/how-to-addeventlistener-to-multiple-elements-in-a-single-line

　　　　 https://www.cnblogs.com/iyitong/p/4229355.html

具体例子如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
 6             integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 7     <title>Document</title>
 8 </head>
 9 <body>
10 
11     <div class="form_group">
12         <div class="form_group_radio" id="radio_div1">
13                 <input type = "radio" name = "optionRadio" id = "optionsRadios1" value = "option1" checked> 题目
14                 <input type = "radio" name = "optionRadio" id = "optionsRadios2" value = "option2"> 答案
15         </div>
16         <div class="form_group_input">
17             <input type="text" name="input_box1" id="input_row1" class="form-control" maxlength="10" style="width: 200px;">
18         </div>
19     </div>
20     
21     <div class="form_group">
22         <div class="form_group_radio">
23                 <input type = "radio" name = "optionRadio1" id = "optionsRadios3" value = "option1" checked> 题目
24                 <input type = "radio" name = "optionRadio1" id = "optionsRadios4" value = "option2"> 答案
25         </div>
26         <div class="form_group_input">
27             <input type="text" name="input_box2" id="input_row2" class="form-control" maxlength="10" style="width: 200px;">
28         </div>
29     </div>
30 <script>
31 
32     // document.querySelectorAll("input[type='radio']")是获取网页上所有type属性为radio的input元素
33     document.querySelectorAll("input[type='radio']").forEach(item=>{
34         item.addEventListener('click', event=>{
35             console.log(event.target.value);
36             if (event.target.value == "option1") {
37                 alert("option1");
38             } else {
39                 alert("option2");
40             }
41         })
42     })
43 </script>
44 </body>
45 </html>

结果如下图所示:

标签：querySelectorAll,javascript,same,event,item,radio,input,type,properties
来源： https://www.cnblogs.com/ttweixiao-IT-program/p/14090755.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript 给所有相同属性元素添加同一事件(javascript add the same event to all the same properties)