精华内容
下载资源
问答
  • HTML复选框选中与未选中触发事件的方法
    千次阅读
    2021-06-11 00:50:56

    今天在做一个不需要from表单提交数据的复选框的小功能时,需要在复选框选中或取消选中的同时对一些后台的数据进行修改。就想到了使用js代码来监控复选框的状态,并向后台发送时时数据。关于js代码如何监控 checkbox 复选框的状态,可以参考下面的示例。

    checkbox 复选框选中与未选中触发事件的方法

    jq代码__点击checkbox,触发事件 我是复选框

    $("#isbox").click(function() {

    if ($(this).is(":checked")== true) {

    console.log('我被选中了!');

    } else {

    console.log('我没有被选中!');

    }

    });

    //这个代码和上面的一样的,选择一个使用即可!

    $('input[type="checkbox"]').click(function() {

    if ($(this).is(":checked")== true) {

    console.log('我被选中了!');

    } else {

    console.log('我没有被选中!');

    }

    });

    原生JS代码__点击checkbox,触发事件

    例: 我是复选框

    function ischeck(e){

    if(e.checked){

    console.log('选中');

    }else{

    console.log('未选中');

    }

    }

    例: 我是复选框

    document.getElementById('isbox').onclick = function(){

    if(this.checked){

    console.log('选中');

    }else{

    console.log('未选中');

    }

    };

    PS:上面的两个原生JS检测 checkbox 的选中状态的代码原理都是一样的,只是写法不同而已!

    更多相关内容
  • HTML复选框

    2018-06-20 21:49:17
    是否因为前端页面中select每次只能选一个选项的困惑而苦恼?使用这个复选控件吧,轻松实现复选框功能。每次可以选多个选项。效果美观。
  • 复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影。接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助。 第一个是关于复选框全选反选的操作,...
  • js checkbox全选 反选 取消全部设置表单html复选框勾选
  • html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="js,笔试题目" /> <style type="text/...
  • html复选框

    千次阅读 2021-08-22 13:23:01
    最简单的实现方法去百度搜html复选框,这是对自己盲写不自信的童鞋,或者去w3,菜鸟,要是这样都搞不定,那我也不知道咋弄了 //dom部分 <input type="checkbox" value="0" checked>候选项1 <input type=...

    之所以想到复选框是因为在上周的工作中看到同事的代码让我大开眼界,我是真没有想到一个最基本,最简单的页面元素都能写的这样抽象难用

    最简单的实现方法去百度搜html复选框,这是对自己盲写不自信的童鞋,或者去w3,菜鸟,要是这样都搞不定,那我也不知道咋弄了

    //dom部分
    <input type="checkbox" value="0" checked>候选项1
    <input type="checkbox" value="1">候选项2
    <input type="checkbox" value="2">候选项3
    
    //逻辑部分
    <script>
        
        //把第一个复选框设置未false,使用了jquery的索引
        $('input[type=checkbox]').eq(0).prop('checked', false)
        
        //所有都置为true,注意这里不能用attr,只能用prop
        $('input[type=checkbox]').prop('checked', true)
    
        //查询哪些被选中
        $('input[type=checkbox]').filter(':checked')
    
        //如果不用伪类就用循环,注意类数组不能用forEach
        function getValue(){
              const cbs =  $('input[type=checkbox]').toArray();
              let value = '';
              for(let i=0; i<cbs.length; i++){
    
                  if($(cbs[i]).prop('checked')){
                      value += $(cbs[i]).val() + ','
                  }
               }
               return value;
        }
      
    </script>

    那如果我不想用原生的复选框咋办,两个办法,覆盖浏览器复选框的样式,这是我强烈不推荐的,第二种就是用img或者label的background,而后者就是我同事写的东西,如果非要用label去做视觉必然要隐藏input元素,这就直接导致调试的时候你点击的是label但是响应的是input,如果不仔细看样式表,完全不知道写了个啥

    //这里的图片路径是假的,checked代表选中,defalut代表未选中
    <img src='./checked.png' c-value='0' check='1'>默认选项1
    <img src='./default.png' c-value='1' check='0'>默认选项2
    <img src='./default.png' c-value='2' check='0'>默认选项3
    
    <script>
        //把第一个复选框设置未false,如果觉得不够优雅可以不设置check属性
        $('img').eq(0).attr('src', './default.png').attr('check', '0')
        
        //所有都置为true,注意这里不能用attr,只能用prop
        $('img').attr('src', './checked.png').attr('check', '1')
    
        //使用属性选择器找出哪些被选中
        $('img[src="./checked.png"]')
    
        function getValue(){
              const cbs =  $('img').toArray();
              let value = '';
              for(let i=0; i<cbs.length; i++){
    
                  if($(cbs[i]).attr('check') == '1'){
                      value += $(cbs[i]).attr('c-value') + ','
                  }
              }
              return value;
        }
    </script>

     如果有写错的地方,请各位多批评指正,如果有更好的想法也请提出来

    展开全文
  • ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用。 复选框标签 实例 实例中,会根据复选框是否选中,修改 checked 值,true 为选中, false 为未选中。...
  • html制作圆角边的复选框
  • <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> <title>html-www.51windows.Net</title>...– //checkbox元素的名字前缀... //设置最大允许
  • 改变浏览自带的复选框架样式,图片可以自己定义。直接替换即可。
  • 复选框全选处理.html

    2020-06-23 22:06:14
    我学的java,在一次开发HTML前端时涉及到了数据动态遍历和全选/反全选按钮的实现,试了很多input全选框的实现,很多都只能点击两次,现在分享一下解决方案!
  • 我正在实现颜色复选框我认为它会很容易做颜色复选框,但是当我开始实施它。 Job是第一次这么做。下面是COLOR CHECK BOX的HTML和CSS,任何人都可以定制这个HTML和CSS。HTML: -CSS: -.squaredThree {width: 20px;...

    我正在实现颜色复选框我认为它会很容易做颜色复选框,但是当我开始实施它。 Job是第一次这么做。下面是COLOR CHECK BOX的HTML和CSS,任何人都可以定制这个HTML和CSS。

    HTML: -

    CSS: -

    .squaredThree {

    width: 20px;

    position: relative;

    }

    .squaredThree label {

    cursor: pointer;

    position: absolute;

    width: 15px;

    height: 15px;

    top: 0;

    background:#f7f7f7;

    border:1px solid #6d7279;

    }

    .squaredThree label:after {

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

    content: '';

    position: absolute;

    width: 9px;

    height: 5px;

    background: transparent;

    top: 2px;

    left: 2px;

    border: 3px solid #0b9dda;

    border-top: none;

    border-right: none;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    transform: rotate(-45deg);

    }

    .squaredThree label:hover::after {

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    filter: alpha(opacity=30);

    opacity: 0.3;

    }

    .squaredThree input[type=checkbox]:checked + label:after {

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

    }

    展开全文
  • 单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的。本文收集了10个相对比较漂亮的美化版单选框和复选框,希望你会喜欢。 1、...
  • html复选框全选按钮

    千次阅读 2021-06-09 10:31:03
    如何用html复选框全选中和全不选中html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = document.getElementsByName("preDelCheck"); var desc = document....

    如何用html做复选框全选中和全不选中

    html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = document.getElementsByName("preDelCheck"); var desc = document.getElementById("allChecked"); var selectOrUnselect=false; for(var i = 0; i < allCheckBoxs.length; i ++ ) { if(allChec

    HTML一个按钮实现全选反选功能,大神们帮我挑错

    cc3e7c291aa0589186fc50cc14a05d41.png

    做好说说错在哪里,需要怎么改

    全选反选:有问题

    2.在html中怎么使一个div中的所有复选框全选和反选var div=document.getElementById(div的id); var chks=div.getElementsByName(checkbox的name); //checkbox设为同一个name for(var i=0;i

    html如何通过按钮来实现全选全不选的功能

    两个按钮,一个全选,一个全不选,脚本中怎么写?按钮里怎么写?CSS布局HTML小编今天和大家分享高人仅供参考。 function ck(b) { var input = document.getElementsByTagName("input"); for (var i=0;i

    HtmlCSS布局HTML小编今天和大家分享一个复选框,能够定义位置,选择全选

    代码过长,我就写一下关键的js代码:(希望帮助到你) /*复选框全选或全不选效果*/ function selectAll(){ var oInput=document.getElementsByName("cartCheckBox"); for (var i=0;i

    怎么实现html复选框中全选和清除呢

    展开全文
  • 用checkbox实现的单选功能,很简单的js代码。
  • 今天在进行HTML的table练习的时候,发现一个比较有趣的知识点,有关于复选框的全选、全不选,以及单选操作的相关问题。 待我上网搜索了一下相关资料,发现有关于全选以及全不选的详解还是挺多的,但是复选框与全选的...
  • 18、HTML复选框checkbox

    千次阅读 2020-10-30 10:36:15
    例如爱好字段,这时用户想选择多个,就不能再使用单选按钮了,可以使用 HTML 中的复选框复选框与单选按钮不同,用户通过点击就可以实现选中或取消,而且不限制选中的数量。 在 HTML 中,把 <input> 标签中的...
  • js checkbox全选 反选 取消全部设置表单html复选框
  • NULL 博文链接:https://heisetoufa.iteye.com/blog/356077
  • 2、当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中; 3、将下面的复选框的id值传递给Controller层,组成id数组,然后调用相应的方法(一般都...
  • html 复选框 选中一个

    千次阅读 2020-05-10 11:10:20
    function changeCheckbox(){ $('input[type="checkbox"]').on('change', function() { $('input[type="checkbox"]').not(this).prop('checked', false);}); } 如图效果:
  • 使html复选框的文本可单击(例如ASP.NET控件)
  • 实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证...带数据验证和复选框的表单提交</title> [removed][removed] <style type="text/css"> table { border-collapse: collapse; } t
  • Django 中,html 页面通过 form 标签来传递表单数据。...补充知识:解决checkbox复选框选中传值,不选中不传值的方案 解决checkbox复选框选中传值,不选中不传值的方案 问题描述: 一个form表单中的结
  • 由jquery库加自定义css创建的无限级树形菜单,向下兼容IE8
  • HTML表单复选框标签在HTML的表单控件中,复选框也是经常使用的控件,它可以让用户选择打勾或不打勾。它使用的也是标签。一、定义标签用于表示文本框、密码框、单选框、复选框、文件上传框、普通按钮、提交按钮、重置...
  • 首先来看看实现的效果图: ...HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 132,021
精华内容 52,808
关键字:

html复选框