怎样用js获取所有name中包含'btn'的按钮，我想点击这些名字包含'btn'的按钮，添加事件弹出按钮的名称？

虽然用name能达到预期的效果，但是我个人建议还是用classname来做为选取的条件或者更好一点。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
</head>
<body>
<div id="demo">
    <input type="button" value="aa" name="btn"/>
    <input type="button" value="aa" name="fuck"/>
    <input type="button" value="aa" name="kao btn"/>
    <input type="button" value="aa" name="fuck"/>
    <input type="button" value="aa" name="btn fuck"/>
</div>
<div id="demo2">
    <input type="button" value="aa" name="btn"/>
    <input type="button" value="aa" name="kao btn"/>
    <input type="button" value="aa" name="btn fuck"/>
</div>
<div id="demo3">
    <input type="button" value="aa" class="btn" name="btn"/>
    <input type="button" value="aa" name="fuck"/>
    <input type="button" value="aa" class="btn kao" name="kao btn"/>
    <input type="button" value="aa" name="fuck"/>
    <input type="button" value="aa" class="fuck btn" name="btn fuck"/>
</div>
<script type="text/javascript">
    function getByName(tName, cls, oParent){
        var res   = [],
            parent = (oParent || document).getElementsByTagName(tName),
            child = null,
            reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');        for(var i = 0, len = parent.length; i < len; i ++){
            child = parent[i];            if(reg.test(child.name)){
                res.push(child);
            }
        }
        return res;
    }    function getByClass(cls, oParent){
        if(document.getElementsByClassName){
            return (oParent || document).getElementsByClassName(cls);
        } else {
            oParent   = oParent || document;
            var res   = [],
                child = null,
                reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');            for(var i = 0, len = oParent.all.length; i < len; i ++){
                child = oParent.all[i];
                if(reg.test(child.className)){
                    res.push(child);
                }
            }
            return res;
        }
    }    var demo = document.getElementById('demo');
    var demo3 = document.getElementById('demo3');
    console.log(getByName('input', 'btn', demo));
    console.log(getByClass('btn', demo3));
</script>
</body>
</html>

当然里边的核心函数是这个：function getByName(tName, cls, oParent){
    var res   = [],
        parent = (oParent || document).getElementsByTagName(tName),
        child = null,
        reg   = new RegExp('(^|\\s)' + cls + '(\\s|$)', 'i');    for(var i = 0, len = parent.length; i < len; i ++){
        child = parent[i];        if(reg.test(child.name)){
            res.push(child);
        }
    }
    return res;
}

使用jquery,下面是示例，同时处理2种button。希望对你有所帮助。<input name="btn1" type="button" value="button1"></input>
<input name="btn2" type="button" value="button2"></input>
<button name="btn3" >button3</button>
$(function() {
    $("[name^=btn]").bind("click",function() {
        alert($(this).attr("name"));
    });
}
);

  <input type="button" name="btn" value="我是按钮1"/>
  <input type="button" name="btn" value="我是按钮2"/>
  <input type="button" name="btn" value="我是按钮3"/>
  <input type="button" name="btn" value="我是按钮4"/>     window.onload = function(){
var btns = document.getElementsByName("btn");
for (var i=0;i<btns.length;i++){
btns[i].onclick = function(){
alert(this.value);
};
}
     };

<html>
<head>
<title></title>
<script>
        window.onload = function(){
         var btns = document.getElementsByTagName('button');
         alert(btns.length);
         for(var i = 0 ;i < btns.length;i++){
         if(btns[i].name.indexOf('btn')!=-1){
         btns[i].onclick = function(){
         alert(this.name);
         }
         }
         }
         var btns1 = document.getElementsByTagName('input');
         for(var i = 0 ;i < btns1.length;i++){
         if(btns1[i].type=='button' && btns1[i].name.indexOf('btn')!=-1){
         btns1[i].onclick = function(){
         alert(this.name);
         }
         }
         }
        }
</script>
</head>
<body>
<div class="panel" name="btn1">aadsf</div>
<div class="panel" name="btn2">aadsf</div>
<button name="btn3">btn3</button>
<button name="btn4">btn4</button>
<button name="btn5">btn5</button>
<input type="button" name="btn6" value="btn6">
<input type="button" name="btn7" value="btn6">
<input type="text" name="btn7" value="btn8">
</body>
</html>

调试易

怎样用js获取所有name中包含'btn'的按钮，我想点击这些名字包含'btn'的按钮，添加事件弹出按钮的名称？

解决方案 »