关于checkbox在前端页面中判断勾选方案

最新推荐文章于 2025-06-28 14:45:55 发布

原创最新推荐文章于 2025-06-28 14:45:55 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #前端 #js #jquery

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在前端开发中处理Checkbox勾选状态的两种方法：原生JavaScript解决方案和jQuery实现。通过这两种方式，可以有效地检查和管理Checkbox的状态，以实现更灵活的交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js方案

  let a=document.querySelector('input[type="checkbox"]')
    console.log(a.getAttribute('checked')); //null

    a.onclick=function(){
      if(a.getAttribute('checked')==null||a.getAttribute('checked')=='false'){
        a.setAttribute('checked','true')
      }else{
        a.setAttribute('checked','false')
      }
      b=document.getElementById('check').getAttribute('checked')
      console.log(b); //勾选时为true，不勾选时为false
      console.log(typeof b);  //string
      console.log(a);  //可以看到checked属性为true/false
    }

jquery方案

<script src="jquery-3.4.0.min.js"></script>
<script>
  $('input[type="checkbox"]').click(function(){
    if($('input[type="checkbox"]').is(':checked')){
      console.log('checked'); //页面里可以看到点击勾选时打印
    }else{
      console.log('empty'); //页面里可以看到点击非勾选时打印
    }
  })
</script>