zoukankan      html  css  js  c++  java
  • checkbox问题

    checkbox多选事件:

    如下HTML代码:

    <input type="checkbox" name="test" value="1">1
    <input type="checkbox" name="test" value="2">2
    <input type="checkbox" name="test" value="3">3
    <input type="checkbox" name="test" value="4">4
    <input type="checkbox" name="test" value="5">5
    <button id="btn_send" >点击改变选中状态</button>


    点击全选中:

    $("#btn_send").click(function(){
      $("[name:test]:checkbox").attr("checked",false);
    })

    点击全部选中:

    $("#btn_send").click(function(){
      $("[name:test]:checkbox").attr("checked",false);
    })

    反选:关键在于!$(this).attr("checked");即与当前选中的状态不同

    $("#btn_send").click(function(){
      $("[name:test]:checkbox").each(function(){
        $(this).attr("checked",!$(this).attr("checked"));
      })
    })

     也可以直接取checkbox的属性this.checked来实现:

    $("#btn_send").click(function(){
      $("[name:test]:checked").each(function(){
        this.checked = !this.checked;
      })
    })

     

    获取checkbox的值:

    、遍历选中的checkbox,获取值的字符串形式:

    $("#btn_send").click(function(){
      var str = "";
      var value = $("[name:test]:checkbox:checked").each(function(){
        str += $(this).val()+"\r\n";
      });
      //alert(str);
    });

    在项目后台中,获得primary_value的值。

    $("#btn_send").click(function(){
      var str = "";
      //都可以实现,以下写法
      //var value = $("[pk=user_id]:checkbox:checked").each(function(){
      //var value = $("[pk:user_id]:checkbox:checked").each(function(){
      var value = $(":checkbox:checked").each(function(){
        str += $(this).val();
      });
      $("#user_id").val(str);//将值填充到指定的位置
    });

     做全选与全部选的时候:

    HTML:

    <input type="checkbox" name="test" id="checkall_test">全选
    <input type="checkbox" name="test" value="1">1
    <input type="checkbox" name="test" value="2">2
    <input type="checkbox" name="test" value="3">3
    <input type="checkbox" name="test" value="4">4
    <input type="checkbox" name="test" value="5">5
    <button id="btn_send" >点击改变选中状态</button>
    $("#checkall_test").click(function(){
      if(this.checked){
        $("[name=test]:checkbox").attr("checked",true);
      }else{
        $("[name=test]:checkbox").attr("checked",false);
      }
    })

    因为所有子多选框的状态和checkall_test的状态是一样的所以可以这样写:

    $("#checkall_test").click(function(){
      $("[name=test]:checkbox").attr("checked",this.checked);
    })

    如果要实现全部选中的时候,checkall_test选中,如果有一个没选中则不选中checkall_test,如果都选中了自动选中checkall_test。实现如下:

    $("[name=test]:checkbox").click(function(){
      var flag = true;
      $("[name=test]:checkbox").each(function(){
        if(!this.checked){
          flag = false;//如果有没选中的,则不选中checkall_test
        }
      });
      $("#checkall_test").attr("checked",flag);
    });

    为什么在if中使用$(this).attr("checked",false)  ?? 

    梗住了,那是设置属性了,这样改:$(this).attr("checked") == false就OK了!




  • 相关阅读:
    SQL Server身份验证登录失败
    课程总结及加分项
    导入并配置Guns框架
    python数据化中文是方块显示
    服务外包平台测试
    idea配置javap
    interface和abstract的区别
    简记Vue弹窗组件eldaolog被父界面创建后,子界面created函数只调用一次的解决方案
    Vue computed属性和methods区别
    记录一下前端查询条件对应后端多个条件的一种简单粗暴解决方法
  • 原文地址:https://www.cnblogs.com/colorstory/p/2647292.html
Copyright © 2011-2022 走看看