bootstrap按钮点击事件_javascript 给所有相同属性元素添加同一事件

最新推荐文章于 2023-02-11 01:00:00 发布

Rosa96

最新推荐文章于 2023-02-11 01:00:00 发布

阅读量781

点赞数

文章标签： bootstrap按钮点击事件

本文链接：https://blog.csdn.net/weixin_31318441/article/details/112102695

版权

经常遇到要给 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

具体例子如下:

<html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <title>Documenttitle>head><body>    <div class="form_group">        <div class="form_group_radio" id="radio_div1">                <input type = "radio" name = "optionRadio" id = "optionsRadios1" value = "option1" checked> 题目                <input type = "radio" name = "optionRadio" id = "optionsRadios2" value = "option2"> 答案        div>        <div class="form_group_input">            <input type="text" name="input_box1" id="input_row1" class="form-control" maxlength="10" style="width: 200px;">        div>    div>    <div class="form_group">        <div class="form_group_radio">                <input type = "radio" name = "optionRadio1" id = "optionsRadios3" value = "option1" checked> 题目                <input type = "radio" name = "optionRadio1" id = "optionsRadios4" value = "option2"> 答案        div>        <div class="form_group_input">            <input type="text" name="input_box2" id="input_row2" class="form-control" maxlength="10" style="width: 200px;">        div>    div><script>    // document.querySelectorAll("input[type='radio']")是获取网页上所有type属性为radio的input元素    document.querySelectorAll("input[type='radio']").forEach(item=>{        item.addEventListener('click', event=>{            console.log(event.target.value);            if (event.target.value == "option1") {                alert("option1");            } else {                alert("option2");            }        })    })script>body>html>

结果如下图所示:

Rosa96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap按钮点击事件_javascript 给所有相同属性元素添加同一事件

经常遇到要给 html 中所有相同属性的元素添加同一个点击事件, 这里, 我需要给所有 type 属性为 "radio" 的 input 元素添加上相同的点击事件, 具体实现的 javascript 代码如下:// document.querySelectorAll("input[type='radio']")是获取网页上所有type属性为radio的input元素document.qu...
复制链接

扫一扫