精华内容
下载资源
问答
  • 用javascript实现选中其中一个复选框后,其他复选框不可用
  • 今天研究了一下微信小程序,同事有一个问题,希望实现点击一个复选选中多个复选的,取消一个复选取消多个复选复选不影响单个复选,在这里记录一下,因为写的是暂时实现,效率特别低,如果大家有什么好的想法欢迎...

    今天研究了一下微信小程序,同事有一个问题,希望实现点击一个复选选中多个复选的,取消一个复选取消多个复选 大复选不影响单个复选,在这里记录一下,因为写的是暂时实现,效率特别低,如果大家有什么好的想法欢迎留言!

    wxml:

      <form bindsubmit="formSubmit" bindreset="formReset">  <view>
         <view>checkbox</view>
         <checkbox-group name="city" bindchange="shengChange">    <view wx:for="{{sheng}}"> 
              <label><checkbox  value="{{item.areaprovincecode}}"/>{{item.areaprovince}}</label>
                <view wx:for="{{item.areaCityList}}">
                    <label><checkbox checked='{{item.checked}}' value="{{item.areaprovincecode}}"/>{{item.areaprovince}}</label>
                </view>
         </view>
         </checkbox-group>   </view>   <view>
         <button formType="submit">Submit</button>
         <button formType="reset">Reset</button>   </view> </form>
    

    js:

    首先有一个顶级变量

     //用来存储选中的省的值
     var checkedId=[];
    
    shengChange :function(e){
        //总地区
         var list=this.data.sheng;
        
        //当前选中的所有复选框值
         var pagelist = e.detail.value;
        
         for (var a = 0; a < list.length;a++){
          //先是新增复选  当前选择循环>已选择省份循环
           for (var b = 0; b < pagelist.length;b++){
             if (list[a].areaprovincecode == pagelist[b]){
               if (checkedId.length==0){
                 checkedId.push(pagelist[b]);
                 for (var h = 0; h < list[a].areaCityList.length; h++) {
                   this.setData({
                     ["sheng[" + a + "].checked"]: true,
                     ["sheng[" + a + "].areaCityList[" + h + "].checked"]: true
                   })
                 }
               }else{
                 var xz=true;
                 for (var z = 0; z < checkedId.length;z++){
                   if (pagelist[b] == checkedId[z]){
                      xz=false;
                   }
                 }
                 if (xz){
                   checkedId.push(pagelist[b]);
                   
                   for (var h = 0; h < list[a].areaCityList.length; h++) {
                   this.setData({
                     ["sheng[" + a + "].checked"]: true,
                     ["sheng[" + a + "].areaCityList[" + h + "].checked"]: true
                   })
                   }
                 }
               }
             }
           }
         
          //后是删除省复选  已选择省份循环>当前选择省份循环
           for (var c = 0; c < checkedId.length;c++){
               if (checkedId.length!=0){
                 var qx=true;
                 for (var i = 0; i < pagelist.length;i++){
                   if (checkedId[c] == pagelist[i]){
                      qx=false;
                   }
                 }
                 if(qx){
                   if (checkedId[c] == list[a].areaprovincecode){
                     checkedId.splice(c, 1);
                     
                     for (var h = 0; h < list[a].areaCityList.length;h++ ){
                       this.setData({
                         ["sheng[" + a + "].checked"]: false,
                         ["sheng[" + a + "].areaCityList[" + h + "].checked"]: false
                       })
                     }
                    }
                 }
              }
           }
         }
       },
      formSubmit: function (e) {
        console.log('form发生了submit事件,携带数据为:', e.detail.value)
      },
      formReset: function () {
        console.log('form发生了reset事件')
      },
    

    截取一段数据:

    sheng:[{
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae5",
        "areastate": "Y",
        "areaprovince": "河北省",
        "areaprovincecode": "15613",
        "areacitycode": "156",
        "areaCityList": [
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae6",
            "areastate": "Y",
            "areaprovince": "石家庄",
            "areaprovincecode": "156130100",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae7",
            "areastate": "Y",
            "areaprovince": "保定",
            "areaprovincecode": "156130600",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae8",
            "areastate": "Y",
            "areaprovince": "廊坊",
            "areaprovincecode": "156131000",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae9",
            "areastate": "Y",
            "areaprovince": "邯郸",
            "areaprovincecode": "156130400",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5001",
            "areastate": "Y",
            "areaprovince": "邢台",
            "areaprovincecode": "156130500",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5002",
            "areastate": "Y",
            "areaprovince": "唐山",
            "areaprovincecode": "156130200",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5003",
            "areastate": "Y",
            "areaprovince": "秦皇岛",
            "areaprovincecode": "156130300",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5004",
            "areastate": "Y",
            "areaprovince": "承德",
            "areaprovincecode": "156130800",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5005",
            "areastate": "Y",
            "areaprovince": "张家口",
            "areaprovincecode": "156130700",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5006",
            "areastate": "Y",
            "areaprovince": "沧州",
            "areaprovincecode": "156130900",
            "areacity": null,
            "areacitycode": "15613"
          },
          {
            "id": null,
            "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5007",
            "areastate": "Y",
            "areaprovince": "衡水",
            "areaprovincecode": "156131100",
            "areacity": null,
            "areacitycode": "15613"
          }
        ]
      },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5008",
         "areastate": "Y",
         "areaprovince": "山东省",
         "areaprovincecode": "15637",
         "areacitycode": "156",
         "areaCityList": [
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5009",
             "areastate": "Y",
             "areaprovince": "济南",
             "areaprovincecode": "156370100",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5010",
             "areastate": "Y",
             "areaprovince": "青岛",
             "areaprovincecode": "156370200",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5011",
             "areastate": "Y",
             "areaprovince": "聊城",
             "areaprovincecode": "156371500",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5012",
             "areastate": "Y",
             "areaprovince": "德州",
             "areaprovincecode": "156371400",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5013",
             "areastate": "Y",
             "areaprovince": "东营",
             "areaprovincecode": "156370500",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5014",
             "areastate": "Y",
             "areaprovince": "淄博",
             "areaprovincecode": "156370300",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5015",
             "areastate": "Y",
             "areaprovince": "潍坊",
             "areaprovincecode": "156370700",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5016",
             "areastate": "Y",
             "areaprovince": "烟台",
             "areaprovincecode": "156370600",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5017",
             "areastate": "Y",
             "areaprovince": "威海",
             "areaprovincecode": "156371000",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5018",
             "areastate": "Y",
             "areaprovince": "日照",
             "areaprovincecode": "156371100",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5019",
             "areastate": "Y",
             "areaprovince": "临沂",
             "areaprovincecode": "156371300",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5020",
             "areastate": "Y",
             "areaprovince": "枣庄",
             "areaprovincecode": "156370400",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5021",
             "areastate": "Y",
             "areaprovince": "济宁",
             "areaprovincecode": "156370800",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5022",
             "areastate": "Y",
             "areaprovince": "泰安",
             "areaprovincecode": "156370900",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5023",
             "areastate": "Y",
             "areaprovince": "莱芜",
             "areaprovincecode": "156371200",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5024",
             "areastate": "Y",
             "areaprovince": "滨州",
             "areaprovincecode": "156371600",
             "areacity": null,
             "areacitycode": "15637"
           },
           {
             "id": null,
             "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5025",
             "areastate": "Y",
             "areaprovince": "菏泽",
             "areaprovincecode": "156371700",
             "areacity": null,
             "areacitycode": "15637"
          }
         ]
       }
    ]
    

    编程一路,长且险,诸位共勉!

    展开全文
  • 改变复选框原有样式,使得变得好看起来

    查了好多资料复选框写的磨磨叽叽的一大堆废话!

    我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用。

    html:
    <label class="checklist iCheck">
    <input class="checkbox" type="checkbox"/>
    <span>沪深A股</span>
    </label>

    css:

    /* 复选框自定义样式 Start */
    /* label 图片浮动,一般不浮动会显示不全 */
    .checklist{float:left;}
    /* checkbox 原复选框隐藏 */
    .checkbox{opacity:0;filter:alpha(opacity=0);}
    /* label 的背景图片 iCheck未选中 iCheck-ed选中 */
    .iCheck{background:url(../img/chk_bg1.png) no-repeat;}
    .iCheck-ed{background:url(../img/chk_bg2.png) no-repeat;}
    /* 复选框自定义样式 End */


    js/jq:

    $(document).ready(function () {
    //判断当前复选框状态,并让label背景图与复选框同步勾选或取消
    $(".checkbox").click(function (){
    //判断复选框勾选状态
    if ($(this).is(':checked')) {
    $("label").removeClass("iCheck");    //删除未勾选选背景图
    $("label").addClass("iCheck-ed");    //添加勾选态背景图
    }else{
    $("label").removeClass("iCheck-ed"); //删除勾选选背景图
    $("label").addClass("iCheck");       //添加未勾选选背景图
    }
    });
    });


      这是css中需要的两个图片,你可以直接保存。

    其实你可以做成任意样式,只要你的ps还看的过去。

    假如你能ps出常见的十个精美复选框样式:http://blog.csdn.net/chelen_jak/article/details/44827393

    那你就完全没有必要用人家的!


    得到的样子:

    这是一个最简单的例子!

    如果你会js/jq,完全可以自己写,写出你想要的东西!

    假如你还是不会,那么可以去下载我的例子,已经打包好就等你下载了!

    除了这个简单的例子还有一个大的复杂复选框表单,两个例子你可以一起下载。(大的只是js上的逻辑有变化)

    简单小例子下载不要积分:

    http://download.csdn.net/detail/liujunxin11/9399314

    简单的小例子+复杂的大例子=需要3积分:

    http://download.csdn.net/detail/liujunxin11/9399307



    展开全文
  • 上图 样式是默认的,其实自己可以改些CSS样式更好看些 代码全: <!DOCTYPE html> <html>...Vue 测试实例 - 单个,多个复选框</title> <script src="https://cdn.staticf...

    上图 

    样式是默认的,其实自己可以改些CSS样式更好看些 

    代码全:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 单个,多个复选框</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <p>单个复选框:</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{ checked }}</label>
    	
      <p>多个复选框:</p>
      <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
      <label for="runoob">Runoob</label>
      <input type="checkbox" id="google" value="Google" v-model="checkedNames">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {{ checkedNames }}</span>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
    	checked : false,
        checkedNames: []
      }
    })
    </script>
    </body>
    </html>

    下面是点击复选框事件

    <template>
        <div id="secert-main">
             <label for="label" @change="clickMe">
                    <input type="checkbox" id="label" v-model="ckeckVal" >点我
            </label>
            <p :class="ckeckClass">复选框没有被选中</p>
        </div>
    </template>
    <script type="text/javascript">
    export default {
        data() {
                return {
                    ckeckVal:false,
                    ckeckClass:'',
                    ckeckInfo:'复选框没有被选中'
                }
            },
            methods:{
        clickMe(){
            var that=this;
            if(that.ckeckVal){
                that.ckeckInfo='复选框被选中了';
                that.ckeckClass='red';
            }else{
                that.ckeckInfo='复选框没有被选中';
                that.ckeckClass='';
            }
        }
      }
    }
    </script>
    <style type="text/css">
    .red{
            color: red;
        }
    </style>

    更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

    展开全文
  • 非常棒的一个JS复选框控制代码,经常在网站上看到的,在很大堆的选择框面前,如果你选择的其中一个复选框,那么和它相反的选项就会变为灰色,成为可选  function f1(chk){ var t = document.getElementById...

     

    非常棒的一个JS复选框控制代码,经常在网站上看到的,在很大一堆的选择框面前,如果你选择的其中一个复选框,那么和它相反的选项就会变为灰色,成为不可选

    <script>

     function f1(chk){

    var t = document.getElementById("txt1"); t.disabled = !chk.checked;

     }

    </script>

     <input type=checkbox οnclick="f1(this)">

    <input type=text id="txt1" disabled="disabled">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>选中复选框,相关类变灰</title>
    <script language="JavaScript">
      <!--
    function selectKind(the){
    var obj = the;
    var container = document.getElementById("kind_" + obj.name);
    for(var i=0;i<container.getElementsByTagName("input").length;i++)
    {
    container.getElementsByTagName("input")[i].disabled = obj.checked;
    }
    
    }
    //-->
    </script>
    </head>
    <body>
    <input type='checkbox' value="2" name=aa οnclick="selectKind(this)">我从事游戏编程
    <div id="kind_aa">
    <input type='checkbox' value="php" name=aa>PHP  
    <input type='checkbox' value="asp.net" name=aa>ASP.NET
    <input type='checkbox' value="java" name=aa>JAVA
    </div>
    <input type='checkbox' value="1" name=bb οnclick="selectKind(this)">平时不上网
    <div id="kind_bb">
    <input type='checkbox' value="baidu.com" name=bb>baidu.com  
    <input type='checkbox' value="163.com" name=bb>163.com
    <input type='checkbox' value="codefans.net" name=bb>codefans.net
    </div>
    </body>
    </html>
    


     

    展开全文
  • Flutter Checkbox 复选框

    万次阅读 2019-06-25 09:20:26
    Flutter 复选框 有两种: 是精简版Checkbox复选框 ,二是自带标题和副标题CheckboxListTile复选框 参数详解 属性 说明 Checkbox 复选框 value 是否选中此复选框 onChanged 监听当复选框...
  • jQuery实现复选框的全选和全

    万次阅读 2018-02-03 18:19:03
    jQuery实现复选框的全选和全选 效果如图: 代码如下: jQuery实现复选框的全选和全选 全选 复选框1 复选框2 复选框3 复选框4 复选框5 $('input[name=...
  •    <span class="GoodsBarCode" ><input type="checkbox" value="货品" />...//取到当前复选框选中的值  $("#BoxGroup:checkbox[checked]").each(function (i) {  ImportType= $(this).val();  });  
  • jquery实现复选框打勾全选,其中一个复选框不勾中,则全选。所有子复选框全勾中则又全选。$('#allSelect').click(function() { if($(this).attr('checked')){ $("input[name='videoId']").attr("checked",...
  • JS获取复选框选中

    千次阅读 2019-01-02 10:09:17
    在报表制作过程中,因为没有公式可以获取到根据使用者的勾选情况,计算出复选框的选中数,所以这里需要在复选框中添加“状态改变”的javascript事件,用于自动获取使用者复选框的选中数,并赋值到指定单元格中。...
  • 目录 介绍 现场演示 ...您可以使用jQuery进行多选复选框下拉列表,而不是使用HTML中的多属性。 这是一个简单的HTML控件,带有jQuery和CSS,可以在任何Web编程语言中使用。 现场演示 https...
  • 各位大佬,zTree复选框怎么实现类似于单选框的类容,让整个树只能选择一个节点,并且选中父节点,子节点不会选中,选中了一个节点,再选选中当前的节点,取消上次选中的节点求代码!!!!
  • //获得得到所的复选框 for (var i = 0; i ; i++) { //如果有1被选中时(jquery1.6以上还可以用if(checkBox[i].prop('checked')) 去判断checkbox是否被选中) if (checkBox[i].checked) { checkOne = true;...
  • 1. 使用AngularJS让checkbox复选框实现,但限选两checkbox复选框代码如下:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8&...
  • 页面效果 目的 点击1复习框,则复选框2的状态随之改变 ... ...1是为了点击此复选框跳转到响应...复选框状态响应函数 2就是跳转的函数 3表示:对class属性值为itemSelect元素,进行元素属性值更改,把checked...
  • ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选
  • 获取多个复选框的值

    千次阅读 2017-09-20 16:25:53
    当有多个复选框CheckBox时,选中其中的某几个复选框时候,判断选中的是哪几,实现方式如下: xml布局文件 xmlns:app="http://schemas.a
  • JavaFx,实现CheckBox复选框的全选和全选。子复选框单个全部选择后,全选框也会被选择;子复选框单个全部选后,全选框也会被选。 fxml文件中: <CheckBox fx:id="selectAll" onAction="#selectBox" layoutY...
  • 复选框只能选中一个

    千次阅读 2016-05-20 10:48:57
    //html代码:       //js:  //只能选择一个部门  function check(obj) {  $('.dept').attr('checked', false);//清空所有复选框  $(obj).attr('checked', true);//给当前对象赋值  
  • 我设置两有序序列,...因为他们的位置是一一对应的,所以当我这位置的复选框是选中状态的话,这时显示对应位置的标签内容就好了。 isCheckec()用来判断复选框是否是选中状态。 text()用来显示label标签的内容。
  • 复选框全选、全选、反选、必选一个
  • //子复选框一个未选中时,去掉全选按钮的选中状态 for ( var i = 0; i ; i++) { ach[i].onclick = function () { if ( !this.checked ) { obox.checked = false; } }; } } <label><input id=...
  • 复选框传值

    千次阅读 2018-08-03 17:17:52
    需求是这样的:  需要设计多字段,分别对应...一个复选框只有一个值(即只有一个option),在选择这复选时改变这唯一option的值,但是option不好实现,所以使用过的隐藏域,每复选对应一个隐藏域,当选...
  • 实现winform DataGridView增加列CheckBox(复选框)列。 效果图 DataGridView =&amp;amp;gt; dgv Form窗体加载事件 private void Form_Load(object sender, EventArgs e) { //为dgv增加复选框列 ...
  • jquery获取复选框checkbox的值

    万次阅读 2018-08-03 13:36:01
    jquery获取复选框checkbox的值 实现方式:jquery获取复选框checkbox的值
  • 当点击全选/全选的复选框时,DOM对象this.checked获取的状态通过prop()方法将所有的复选框设置为同一状态,第次点击时即为全选状态 // 全选/全选 $("input[name='all']").click(function(){ $("input...
  • 模拟QQ聊天树状结构图,添加复选框属性 下面是代码: 如上图我们的根节点ID为datass, 现在选择文字,复选框也会被选中。大家试试看吧;
  • 解决checkbox复选框选中传值,选中传值的方案   问题描述: 一个form表单中的结构是这样的: 则页面显示结果是: 如上填写数据,经过序列化后的数据是: [ {"id":"1","...
  • 一个td里有很多复选框,是从数据库查询出来的list,怎么让复选框有规则的显示呢?比如行 显示2 或者 3: ![页面](https://img-ask.csdn.net/upload/201708/17/1502961582_678157.png) ![html]...
  • jQuery实现遍历复选框

    千次阅读 2016-05-21 22:39:08
    1、问题背景 这里有10个复选框,根据选择的复选框获取其值,并将其值用“——”连接,插入到div中2、实现源码 遍历复选框 $(document).ready(function(){ $("#btn").click(function(){ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 229,708
精华内容 91,883
关键字:

复选框可以一个都不选吗