js复选框和相册选择

2021/8/30 23:09:53

编程Tag： js let 复选框 input 相册 img document 100px getElementsByTagName

本文主要是介绍js复选框和相册选择，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

这篇关于js复选框和相册选择的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js复选框和相册选择

相关编程文章