js复选框和相册选择

2021-08-30 21:04:48 阅读：185 来源： 互联网

标签：document 相册 img getElementsByTagName 100px js let input 复选框

js复选框，全选，全不选，反选

<body>
  <form action="">
    <p><input type="checkbox" name="" id="">西游记</p>
    <p><input type="checkbox" name="" id="">水浒传</p>
    <p><input type="checkbox" name="" id="">红楼梦</p>
    <p><input type="checkbox" name="" id="">三国演义</p>
  </form>
  <button onclick="getAll(0)">全选</button>
  <button onclick="getAll(1)">全不选</button>
  <button onclick="getAll(2)">反选</button>

<script type="text/javascript">
// 获取input
let input = document.getElementsByTagName('input');
// 获取button
let but = document.getElementsByTagName('button');
// 封装一个函数
  function getAll(num){
    // 遍历每一个input
    for(let i=0;i<input.length;i++){
      // 如果num等于0就是第一个button的checked全部生效
      if(num==0){
        input[i].checked = true;

        // 如果num等于1就是第一个button的checked全部不生效
      }else if(num == 1){
        input[i].checked = false;

        // 当checked为true时就等于false;否则相反
      }else{
        input[i].checked = !input[i].checked;
      }
    }
  }
</script>
</body>

相册选择，当我们的鼠标移动到哪一个图片上面就把当前图片放大

<style>
  .big{
            width: 415px;
            height: 400px;
        }
        .small>img{
            width: 100px;
            height: 100px;
        }
</style>
<body>
  <div>
    <img src="./ju.jpg" alt="" class="big">
  </div>
  <div class="small">
    <img src="./ju.jpg" alt="">
    <img src="./ying.jpg" alt="">
    <img src="./hu.jpg" alt="">
    <img src="./bu.jpg" alt="">
  </div>
  <script type="text/javascript">
  // 获取所有的img
    let imgs = document.getElementsByTagName('img');
    // 遍历img,出第二个开始,因为第一个img是我们需要改变的，所以i=1
    for(let i=1;i<imgs.length;i++){
      // 当鼠标移动到哪一个img上面，就触发函数，改变当前src
      imgs[i].onmouseover = function(){
        imgs[0].src = this.src;
      }
    }
  </script>
</body>

标签：document,相册,img,getElementsByTagName,100px,js,let,input,复选框
来源： https://www.cnblogs.com/Privatexaio/p/15207702.html

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

ICode9

js复选框和相册选择