点击按钮怎么实现指定的几个checkbox被选中??

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击按钮实现指定checkbox被选中</title>
</head>
<style>body{
margin:0px; padding:0px; font-size:12px;
}
ul,li{
margin:0px; padding:0px; list-style-type:none;
}input,button{
margin:0px; padding:0px;
}
.submit{
width:900px; height:30px; margin:20px auto; overflow:hidden;
}
.submit button{
width:100px; height:30px; line-height:30px; text-align:center; display:block; float:left; margin-right:10px; border:#b1b1b1; background-color:#cccccc; overflow:hidden;
}.content{
width:900px; height:50px; margin:0px auto; overflow:hidden;
}
.content ul li{
float:left; height:30px; line-height:30px; width:80px;
}
.content ul li input{
float:left; margin-top:8px; margin-right:5px;
}.illustrate{
font-size:14px; width:900px; height:200px; margin:auto; line-height:24px; overflow:hidden;
}
</style>
<body>
<div class="submit">
<button id="btn1">第一种方案</button>
<button id="btn1">第二种方案</button>
<button id="btn1">第三种方案</button>
<button id="btn1">第四种方案</button>
<button id="btn1">第五种方案</button>
<button id="btn1">全选</button>
<button id="btn1">反选</button>
</div><div class="content">
<ul>
<li><input type="checkbox" name="test1" />1</li>
<li><input type="checkbox" name="test2" />2</li>
<li><input type="checkbox" name="test3" />3</li>
<li><input type="checkbox" name="test4" />4</li>
<li><input type="checkbox" name="test5" />5</li>
<li><input type="checkbox" name="test6" />6</li>
<li><input type="checkbox" name="test7" />7</li>
<li><input type="checkbox" name="test8" />8</li>
<li><input type="checkbox" name="test9" />9</li>
<li><input type="checkbox" name="test10" />10</li>
</ul>
</div><div class="illustrate">
当我<br />
点击第一种方案时,选中：1,2,4   <br />
点击第二种方案时,选中：2,3,4,7,9  <br />
点击第三种方案时,选中：1,2,3,5,7,8 <br />
点击第四种方案时,选中：1,2,3,5,7,8<br />
点击第五种方案时,选中：1,2,5,7,8,9,10<br />
全选和反选  你应该懂得!!!
</div></body>
</html>

解决方案 »

  1.   

    <div class="submit">
        <button onclick="check('1,2,4')">第一种方案</button>
        <button onclick="check('2,3,4,7,9')">第二种方案</button>
        <button onclick="check('2,3,4,7,9')">第三种方案</button>
        <button onclick="check('2,3,4,7,9')">第四种方案</button>
        <button onclick="check('1,2,5,7,8,9,10')">第五种方案</button>
        <button onclick="fun(true)">全选</button>
        <button onclick="fun(false)">反选</button>
    </div><div class="content">
        <ul>
            <li><input type="checkbox" name="test1" />1</li>
            <li><input type="checkbox" name="test2" />2</li>
            <li><input type="checkbox" name="test3" />3</li>
            <li><input type="checkbox" name="test4" />4</li>
            <li><input type="checkbox" name="test5" />5</li>
            <li><input type="checkbox" name="test6" />6</li>
            <li><input type="checkbox" name="test7" />7</li>
            <li><input type="checkbox" name="test8" />8</li>
            <li><input type="checkbox" name="test9" />9</li>
            <li><input type="checkbox" name="test10" />10</li>
        </ul>
    </div>
    <script type="text/javascript">
        function check(id){
            id=","+id+",";
            var input=document.getElementsByTagName("input");
            for(var i=0;i<input.length;i++){
                if(id.indexOf(","+(i+1)+",")!=-1){
                    input[i].checked=true;
                }else{
                    input[i].checked=false;
                }
            }
        }
        function fun(id){
            var input=document.getElementsByTagName("input");
            for(var i=0;i<input.length;i++){
                if(id){
                    input[i].checked=true;
                }else{
                    input[i].checked=!input[i].checked;
                }
            }
        }
    </script>
    <div class="illustrate">
        当我<br />
        点击第一种方案时,选中：1,2,4   <br />
        点击第二种方案时,选中：2,3,4,7,9  <br />
        点击第三种方案时,选中：1,2,3,5,7,8 <br />
        点击第四种方案时,选中：1,2,3,5,7,8<br />
        点击第五种方案时,选中：1,2,5,7,8,9,10<br />
        全选和反选  你应该懂得!!!
    </div>
      

  2.   

    只写了第一种方案，全选和反选，剩下的照着第一种方案改<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("#btn1").click(function(){
    $("ul li input:checkbox:eq(0),:checkbox:eq(1),:checkbox:eq(3)").attr("checked",true);
    });
    $("#btn2").click(function(){
    $("ul li input:checkbox").attr("checked",true);
    });
    $("#btn3").click(function(){
    $("ul li input:checkbox").attr("checked",false);
    });
    })
    </script>
      

  3.   

    全选和反选按钮的id改成btn2和btn3
      

  4.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>点击按钮实现指定checkbox被选中</title>
    </head>
    <style>
     
    body{
        margin:0px; padding:0px; font-size:12px;
    }
    ul,li{
        margin:0px; padding:0px; list-style-type:none;
    }
     
    input,button{
        margin:0px; padding:0px;
    }
    .submit{
        width:900px; height:30px; margin:20px auto; overflow:hidden;
    }
    .submit button{
        width:100px; height:30px; line-height:30px; text-align:center; display:block; float:left; margin-right:10px; border:#b1b1b1; background-color:#cccccc; overflow:hidden;
    }
     
    .content{
        width:900px; height:50px; margin:0px auto; overflow:hidden;
    }
    .content ul li{
        float:left; height:30px; line-height:30px; width:80px;
    }
    .content ul li input{
        float:left; margin-top:8px; margin-right:5px;
    }
     
    .illustrate{
        font-size:14px; width:900px; height:200px; margin:auto; line-height:24px; overflow:hidden;
    }
    </style>
    <script type="text/javascript">
    function init(num){
    for(var i=1;i<=10;i++){
    var cs=document.getElementsByName("test"+i)[0];
    if(num==0){
    cs.checked=false;
    }else if(num==1){
    cs.checked=true;
    }else if(num==2){
    if(cs.checked=!cs.checked);
    }
    }
    }
    function change(){
    init(0);
    for(var i=0;i<arguments.length;i++){
    var cs=document.getElementsByName("test"+arguments[i])[0];
    cs.checked=true;
    }
    }
    </script>
    <body>
    <div class="submit">
    <button id="btn1" onclick="change(1,2,4)">第一种方案</button>
    <button id="btn1" onclick="change(2,3,4,7,9)">第二种方案</button>
    <button id="btn1" onclick="change(1,2,3,5,7,8)">第三种方案</button>
    <button id="btn1" onclick="change(1,2,3,5,7,8)">第四种方案</button>
    <button id="btn1" onclick="change(1,2,5,7,8,9,10)">第五种方案</button>
    <button id="btn1" onclick="init(1)">全选</button>
    <button id="btn1" onclick="init(2)">反选</button>
    </div>
     
    <div class="content">
    <ul>
    <li><input type="checkbox" name="test1" />1</li>
    <li><input type="checkbox" name="test2" />2</li>
    <li><input type="checkbox" name="test3" />3</li>
    <li><input type="checkbox" name="test4" />4</li>
    <li><input type="checkbox" name="test5" />5</li>
    <li><input type="checkbox" name="test6" />6</li>
    <li><input type="checkbox" name="test7" />7</li>
    <li><input type="checkbox" name="test8" />8</li>
    <li><input type="checkbox" name="test9" />9</li>
    <li><input type="checkbox" name="test10" />10</li>
    </ul>
    </div>
     
    <div class="illustrate">
    当我<br />
    点击第一种方案时,选中：1,2,4   <br />
    点击第二种方案时,选中：2,3,4,7,9  <br />
    点击第三种方案时,选中：1,2,3,5,7,8 <br />
    点击第四种方案时,选中：1,2,3,5,7,8<br />
    点击第五种方案时,选中：1,2,5,7,8,9,10<br />
    全选和反选  你应该懂得!!!
    </div>
     
    </body>
    </html>
    这样试试