如此图,当用户点击全选的时候,所有剧集被勾选,出现绿色对钩,当用户点击其中某一剧集的时候,进行取消勾选状态对钩取消,求代码

解决方案 »

  1.   


    <style>
      .chBox{
        padding:3px;
        overflow:hidden;
        color:#6e6;
        border:1px solid #ccc;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
    <div onclick="sel()" id="box" >
    <apan class="chBox">√</apan>
    <apan class="chBox">√</apan>
    </div>
    <button onclick="selAll(true)">全选</button> <button onclick="selAll(false)">反选</button>
    <script>
     
      var  box=document.getElementById('box'),
        chs=box.getElementsByTagName('apan');
      function selAll(b){
        for(i=0;i<chs.length;i++) 
          chs[i].innerHTML=b?'√':'╳';
      }
      function sel(evt){
        var el=window.event? event.srcElement: evt.target;
        if(el.className=='chBox'){
          el.innerHTML=el.innerHTML.indexOf('√')==0?'╳':'√';
        }
      }
    </script>
      

  2.   

    chs[i].innerHTML=b?'√':'╳';
    改成
    chs[i].innerHTML=b?'<img src="选中的RUL">':'<img src="未选中的RUL">';
     
      

  3.   

    <!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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
      .chBox{
        padding:3px;
        overflow:hidden;
        color:#6e6;
        border:1px solid #ccc;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
    </head><body>
    <div id="box">
    <apan class="chBox">√</apan>
    <apan class="chBox">√</apan>
    </div>
    <button onclick="selAll(true)">全选</button> <button onclick="selAll(false)">反选</button>
    <script type="text/javascript">
      
      var  box=document.getElementById('box'),
        chs=box.getElementsByTagName('apan');
      function selAll(b){
        for(i=0;i<chs.length;i++) 
          chs[i].innerHTML=b?'√':'╳';
      }
      function sel(evt){
     evt = evt || window.event;
     var el = evt.target || evt.srcElement;
        //var el=window.event? window.event.srcElement: evt.target;
        if(el.className=='chBox'){
          el.innerHTML=el.innerHTML.indexOf('√')==0?'╳':'√';
        }
      }
      
      document.getElementById('box').onclick = sel;
    </script>
    </body>
    </html>
      

  4.   

    改成图片的<style>
      .chBox{
        padding:3px;
        overflow:hidden;
        color:#6e6;
        border:1px solid #ccc;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
    <div onclick="sel()" id="box" >
    <apan class="chBox">aa<img name="chImg" src="http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/1.gif" /></apan>
    <apan class="chBox">bb<img  name="chImg" src="http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/1.gif" /></apan>
    </div>
    <button onclick="selAll(true)">全选</button> <button onclick="selAll(false)">反选</button>
    <script>
      
     var imgs=[
      'http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/1.gif',  //未选中的图
      'http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/9.gif'   //选中的图
     ]
      var  box=document.getElementById('box'),
        chs=document.getElementsByName('chImg');
        
      function selAll(b){
        for(i=0;i<chs.length;i++) 
          chs[i].src=b?imgs[1]:imgs[0];
      }
      function sel(evt){
        var el=window.event? event.srcElement: evt.target; 
        if(el.tagName=='IMG'){
          el.src=el.src.indexOf('1.gif')!=-1?imgs[1]:imgs[0];
        }
      }
    </script>