精华内容
下载资源
问答
  • elementUI select 默认选中

    万次阅读 2018-03-12 13:38:54
    v-model的值为当前被选中的el-option的 value 属性值<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in ...

    v-model的值为当前被选中的el-option的 value 属性值

    <template>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: ''  // 选取默认值在里面就可以了,比如:  value:"选项2";
          }
        }
      }
    </script>

     

    展开全文
  • 1、js原生获取选中的值 var tesObj = document.getElementsByName("killOrder"); //获取选中的值 for(var i=0; i ; i++){ if (tesObj[i].checked==true){ alert(tesObj[i].value+' 是选中的value值'); break; } } 2...

    单选框 radio总结:

    一、页面样式截图:

    <div class="radio-inline">
      <input type="radio"  name="killOrder" id="killOrder1" value="1"/>
      <label for="killOrder1">是</label>
    </div>
    <div class="radio-inline">
      <input type="radio"  name="killOrder" id="killOrder2" value="0" checked/>
      <label for="killOrder2">否</label>
    </div>

    使用label标签可以点击文字就能选中单选框或者是取消选择单选框 

    label标签的两种使用方法:   https://blog.csdn.net/qq_40015157/article/details/110850331

     

    二、js原生

    1、js原生获取选中的值

    var tesObj = document.getElementsByName("killOrder");
    //获取选中的值
    for(var i=0; i < tesObj.length; i++){
     	if (tesObj[i].checked==true){
             alert(tesObj[i].value+'  是选中的value值');
             break;
        }
    }
    

    2、js原生设置选中

    var tesObj = document.getElementsByName("killOrder");
    
    //设置value值为0选中
    for(var i=0; i < tesObj.length; i++){
     	if (tesObj[i].value=="0"){
               tesObj[i].checked = true;
               break;
        }
    }

    三、jquery

    1.获取值

    $("input[name='killOrder']:checked").val();
    
    $('input:radio:checked').val();
    
    $("input[type='radio']:checked").val();
    
    $(":radio[checked]").each(function(radio){alert($(this).val());

     

    注意:有时attr() 无法起到作用,attr() 与 prop() 的区别详见文章。   https://blog.csdn.net/qq_40015157/article/details/110823718

     

    2.设置第一个radio为选中值:

    $('input:radio:first').prop('checked', 'checked');
    
    $('input:radio:first').prop('checked', true);
    
    
    $('input:radio:first').attr('checked', 'checked');
    
    $('input:radio:first').attr('checked', true);

     

    3.设置最后一个radio为选中值:

    $('input:radio:last').prop('checked', 'checked');
    
    $('input:radio:last').prop('checked', true);
    
    
    $('input:radio:last').attr('checked', 'checked');
    
    $('input:radio:last').attr('checked', true);

     

    4.根据索引值设置任意一个radio为选中值:

    $('input:radio').eq(索引值).prop('checked', true);//索引值=0,1,2....
    
    $('input:radio').slice(1,2).prop('checked', true);
    
    
    $('input:radio').eq(索引值).attr('checked', true);//索引值=0,1,2....
    
    $('input:radio').slice(1,2).attr('checked', true);

     

    5.根据value值设置radio为选中值

    $("input:radio[value='2']").prop('checked', true);
    
    $("input[value='1']").prop('checked', true);
    
    $("input[name='killOrder'][value='1']").prop("checked", "checked");
    
    let v = 1;//变量
    $("input[name='killOrder'][value='" + v + "']").prop("checked", true);
    
    
    $("input:radio[value='2']").attr('checked', true);
    
    $("input[value='1']").attr('checked', true);

     

    6.删除value值为2的radio

    $("input:radio[value='2']").remove();

     

    7.删除第几个radio

    $("input:radio").eq(索引值).remove();//索引值=0,1,2....
    
    
    //如删除第3个radio:$("input:radio").eq(2).remove();

     

    8.遍历radio

    $('input:radio').each(function(index,domEle){
    
         //写入代码
    
    });

     

    9.修改单选框样式

    input[type="radio"] + label::before {
        content: "\a0";
        display: inline-block;
        vertical-align: middle;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        border-radius: 50%;
        text-indent: .15em;
        margin-bottom: 4px;
        border: 1px solid #CCCCCC;
    }
    input[type="radio"]:checked + label::before {
        background-color: #4A90E2;
        background-clip: content-box;
        padding: 2px;
    }
    input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    .radio-inline{
        padding-left: 0;
    }
    input[type=radio][disabled]:checked + label::before{
        background-color:#CCCCCC;
        background-clip: content-box;
        padding: 2px;
    
    }

    复选框总结 :   https://blog.csdn.net/qq_40015157/article/details/110819778 

    全选反选 :https://blog.csdn.net/qq_40015157/article/details/110661715

    https://blog.csdn.net/qq_40015157/article/details/80693777

    输入框: https://blog.csdn.net/qq_40015157/article/details/80692543

     

    展开全文
  • jQuery操作复选框checkbox技巧总结 --- 设置选中、取消选中、获取被选中的值、判断是否选中等 一、checked属性定义 先了解下input标签的checked属性: 1、HTML <input> checked 属性 ◆定义和用法 ...

    jQuery操作复选框checkbox技巧总结 --- 设置选中、取消选中、获取被选中的值、判断是否选中等

     

    一、checked属性定义

    先了解下input标签的checked属性:

    1、HTML <input> checked 属性

    ◆ 定义和用法

    checked 属性是一个布尔属性。

    checked 属性规定在页面加载时应该被预先选定的 <input> 元素。

    checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。

    checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

    ◆ HTML 4.01 与 HTML5之间的差异

    无。

    ◆ HTML 与 XHTML 之间的差异

    在 XHTML 中,禁止属性最小化,checked 属性必须定义为<input checked="checked" />

     

    本文讨论的范围为jQuery1.6+ 以上版本,现在jQuery已经到3.2.1了(2018年1月4日)! 。开发中建议使用1.11及以上版本。

     

    二、checked属性的用法

    注意:操作checked、disabled、selected属性,强制建议只用prop()方法!!,不要用attr()方法。

    1、jQuery判断checked是否是选中状态的三种方法:

    .attr('checked') // 返回:"checked"或"undefined" ;
    
    .prop('checked') // 返回true/false
    
    .is(':checked')  // 返回true/false //别忘记冒号哦

    2、jQuery赋值checked的几种写法:

    所有的jQuery版本都可以这样赋值,不建议用attr():

    $("#cb1").attr("checked","checked"); //通用做法,现在不推荐了
    
    $("#cb1").attr("checked",true); //不标准,不推荐了
    
    $("#cb1").attr("checked","true"); //不标准,不推荐了
    
    jQuery的prop()的4种赋值(推荐如下写法):
    $("#cb1").prop("checked",true); //标准写法,推荐!
    
    $("#cb1").prop({checked:true}); //map键值对    
    
    $("#cb1").prop("checked",function(){
    
        return true;//函数返回true或false
    
    });
    
    //$("#cb1").prop("checked","checked"); //不标准

     

    三、标签中checked="checked"已有,但却不显示打勾的解决办法

    在做web项目的时候,做了一个功能,就是当勾选栏目,把所有的角色全勾上。刚开始使用了如下代码:

    function check(id,check) {        
    
        if (check) {                
    
            $("." + id).find("input[type='checkbox']").attr("checked", true);        
    
        } else {                
    
            $("." + id).find("input[type='checkbox']").attr("checked", false);        
    
        }
    
    }

    第一遍勾选和取消是有效的,但是第二遍以后就没反应了,查看了属性,发现checked属性一直存在,但是没显示勾。就考虑移除checked属性看看。

    function check(id,check) {        
    
        if (check) {                
    
            $("." + id).find("input[type='checkbox']").attr("checked", true);        
    
        } else {                
    
            $("." + id).find("input[type='checkbox']").removeAttr("checked");        
    
        }
    
    }

    这次看到checked属性勾上有了,取消就没了,可是问题还是没解决,还是第二遍以后就没反应了。

    可是我都用1.11的版本了,正确的做法是使用prop()方法设置checkbox的checked属性值。 

    function check(id,check) {        
    
        if (check) {                
    
            $("." + id).find("input[type='checkbox']").prop("checked", true);        
    
        } else {                
    
            $("." + id).find("input[type='checkbox']").prop("checked", false);        
    
        }
    
    }

    这个问题会出现的本质就是,jQuery中的attr()和prop()两个方法的使用区别。

    具体请参考:

    jQuery中的attr()与prop()设置属性、获取属性的区别 - chunlynn的小屋 - CSDN博客

    http://blog.csdn.net/chenchunlin526/article/details/77426796  

     

    四、jQuery操作checkbox技巧总结

    1、获取单个checkbox选中项的值(三种写法)

    $("#chx1").find("input:checkbox:checked").val()
    
    //或者
    
    $("#chx1").find("input:[type='checkbox']:checked").val();
    
    $("#chx1").find("input[type='checkbox']:checked").val();
    
    //或者
    
    $("#chx1").find("input:[name='ck']:checked").val();
    
    $("#chx1").find("input[name='ck']:checked").val();

    2、 获取多个checkbox选中项

    $("#chk1").find('input:checkbox').each(function() { //遍历所有复选框
    
        if ($(this).prop('checked') == true) {
    
            console.log($(this).val()); //打印当前选中的复选框的值
    
        }
    
    });
    
    function getCheckBoxVal(){ //jquery获取所有选中的复选框的值 
    
        var chk_value =[]; 
    
        $("#chk1").find('input[name="test"]:checked').each(function(){ //遍历,将所有选中的值放到数组中
    
            chk_value.push($(this).val()); 
    
        }); 
    
        alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 
    
    } 
    
    

    3、设置第一个checkbox 为选中值

    $("#chk1").find('input:checkbox:first').prop("checked",true);
    
    //或者
    
    $("#chk1").find('input:checkbox').eq(0).prop("checked",true);

    4、设置最后一个checkbox为选中值

    $("#chk1").find('input:checkbox:last').prop("checked",true);

    5、根据索引值设置任意一个checkbox为选中值

    $("#chk1").find('input:checkbox').eq(索引值).prop('checked', true);  //索引值=0,1,2.... 
    
    //或者
    
    $("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同时选中第0个和第1个checkbox
    //从索引0开始(包含),到索引2(不包含)的checkbox

    6、根据value值设置checkbox为选中值

    $("#chk1").find("input:checkbox[value='1']").prop('checked',true);
    
    $("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);

    7、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox

    $("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除,将标签从页面上删除了
    
    
    $("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2....
    
    //如删除第3个checkbox:
    
    $("#chk1").find("input:checkbox").eq(2).remove();

    8、全部选中或全部取消选中

    $("#chk1").find('input:checkbox').each(function() {
    
        $(this).prop('checked', true);
    
    });
    
    //或者
    
    $("#chk1").find('input:checkbox').each(function () {
    
        $(this).prop('checked',false);
    
    });

    9、选中所有奇数项或偶数项

    $("#chk1").find("input[type='checkbox']:even").prop("checked",true); //选中所有偶数 
    
    $("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //选中所有奇数 
    
    

    10、反选

    方法一:

    $("#btn4").click(function(){ 
    
        $("input[type='checkbox']").each(function(){ //反选 
    
             if($(this).prop("checked")){ 
    
                 $(this).prop("checked",false); 
    
              } else{ 
    
                 $(this).prop("checked",true); 
    
             } 
    
        });    
    
    }); 

    方法二:

    $("#btn4").on('click',function(){ 
    
    //反选所有的复选框(没选中的改为选中,选中的改为取消选中)
    
        $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){
    
            return !oldValue;
    
        });
    
    }

     

    本系列其他相关文章:

    【1】jQuery中的attr()与prop()设置属性、获取属性的区别 - chunlynn的小屋 - CSDN博客

    【2】<a>标签中 href 和 onclick 的区别,以及 onclick(this) 传递this参数详解 - chunlynn的小屋 - CSDN博客

    【3】jQuery的removeProp()与removeAttr()移除属性的区别 - chunlynn的小屋 - CSDN博客
     

    欢迎点赞关注~~~

     

    展开全文
  • vue .js绑定checkbox并获取、改变选中状态 1.html <div class="weui-cells weui-cells_checkbox font14" v-for="item in items"> <label class="weui-cell weui-check__label"> <...

    vue .js绑定checkbox并获取、改变选中状态

    1.html

    <div class="weui-cells weui-cells_checkbox font14" v-for="item in items">
                <label class="weui-cell weui-check__label">
                    <div class="weui-cell__ft width-inherit">
                        <input type="checkbox" class="weui-check" v-on:click="CheckItem(item)" v-model="item.state" name="checkbox" />
                    </div>
                </label>
            </div>

    2.js

    var vum = new Vue({
        data:{
            items:[{state:false}]
        },
        methods:{
            CheckItem:function(item){
                item.state = !item.state;
                console.log(this.items);
            }
        }
    })

     

     

     

    展开全文
  • jquery checkbox 设置选中和不选中

    万次阅读 2019-11-21 17:55:03
    1.设置选中:$("#hasApply").prop("checked",true); 设置不选中:$("#hasApply").prop("checked",false); 或如下方法: // $("#ck").attr("checked",true)//选中 // $("#ck").attr("checked",false)//未选中 ...
  • Android | RadioGroup--设置默认选中

    万次阅读 2016-12-06 17:53:09
    RadioGroup 中, 是通过RadioButton 的 id 来控制是否选中。1. 布局文件中控制:如果在xml 布局文件中需要控制一个RadioButton 默认选中,就需要给他设置一个id。如果不设置id 的话,就会导致该RadioButton 一直是...
  • Axure 表格选中和取消选中

    千次阅读 2019-01-15 22:42:36
    如上图所示,我们要做的效果: ...(1)为了保持选中或者取消选中状态,我们在中继器数据表增加一列IsSelected选项,用于判断该选项是否是选中或者没选中状态。 (2)设置复选框“选中”状态 (3)增加一...
  • checkbox选中与取消选择

    万次阅读 2018-08-16 11:24:40
    checkbox选中与取消选择 1.html &lt;form&gt; &lt;input type="checkbox" name="items" value="足球" /&gt;足球 &lt;input type="checkbox" name...
  • jqGrid可以使用setSelection方法动态设置某行选中或不选中,但是setSelection其实是一个toggle函数,该行原本选中调用该函数后则取消选中,否则选中。为此在实际使用过程中,我们需要特别注意这个坑,并适当修改...
  • 复选框的设置一、JavaScript判断是否选中checkbox框二、JavaScript设置选中checkbox框三、JavaScript移除选中checkbox框四、使用jQuery判断是否选中checkbox框五、使用jQuery设置选中checkbox框六、使用jQuery设置...
  • 在axure中设置按钮的选中状态,悬停状态以及按钮组设置选中状态,一次只能选中一个。具体实现效果如图 第一种,简单设置按钮的选中,悬停等样式。首先选中按钮,点击新建交互样式-鼠标悬停。然后点击更多样式,即可...
  • select设置选中与不选中

    千次阅读 2019-01-30 18:22:36
    //找到选中的后 设置不选中 $("#id").find("option:selected")[0].selected=false; //设置默认为选中  $("#id").find("option[value='']").prop("selected",...
  • 用传统的选择器赋值checked=true/false可以选中,也可以取消选中,但是再重新选中就不行了,没使用ng-model前提; 请问这个怎么解决,或者angular JS怎么实现
  • input checkbox选中和取消选中事件

    万次阅读 2019-09-27 17:34:19
    input框checkbox复选框实现选中和取消选中的事件 html <input type="checkbox" class="barcodeSavePrint" /> js $(function () { $(".barcodeSavePrint").click(function () { if ( this.checked =...
  •  错误:windows无法安装到这个磁盘 选中的磁盘采用GPT分区形式  解决办法:  win8/win10系统均添加快速启动功能,预装的win8/win10电脑默认都是UEFI引导和GPT硬盘,传统的引导方式为BIOS(Legace)引导和MBR硬盘...
  • layui 如何取得select下拉框选中的值

    万次阅读 热门讨论 2018-07-13 09:58:05
    //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 console.log(data.elem[data.elem.selectedIndex].text); //得到文本内容 }); 引用layui插件,取得下拉框的值 模板: 增加、修改学校/层次/...
  • [图片说明](https://img-ask.csdn.net/upload/201711/03/1509693358_863692.png),假如上图是用jqgrid实现的,我想选中多行数据,就只能勾选每条数据最前面的复选框,那么我如果一不小心没有点中那个复选框,那么我...
  • select2 获取选中的值

    万次阅读 2018-08-08 18:35:21
    获取选中的名 var cardTypeW = $("#cardType option:checked").text(); 获取选中的值 写法1 var cardTypeW = $("#cardType option:checked").val(); 写法2 var cardTypeW = $("#...
  • select选中

    千次阅读 2019-04-14 17:57:00
    1、设置value为“全部“的项选中 复制代码代码如下: $(".selector").val("全部"); 2、设置text为“全部“的项选中 复制代码代码如下: $(".selector").find("option[text='全部']")....
  • Listview点击选中,双击取消选中

    千次阅读 2018-09-06 15:44:09
    如果不想要选中效果只需要myList.setSelector(new ColorDrawable(Color.TRANSPARENT)); 但是默认效果的问题是单击某个item选中之后,再点击一次,并没有去掉选中的效果。 我目前的解决方法是通过position判断是否...
  • JqGrid选中行、取消选中行、获得选中行数据 ,其中取消选中行的方式中,通` $("jqgridtableid").trigger("reloadGrid"); `不好用,建议使用`$("#tokeInOutList").jqGrid('resetSelection');`的方法
  • 实现思路最初的设想最初设想,监听radio的click事件,在click中,阻止默认行为,然后根据点击之前是否选中,来决定是否选中。但这样有个问题,在click监听函数中获取的checked值是点击后的值,无法获取之前的值。...
  • vscode 选中多行 多行编辑

    万次阅读 多人点赞 2019-01-02 19:39:45
    选中一样的一个元素,多次 ctrl + d 多光标选中 返回上一个选中时ctrl+u 按住 鼠标中键 多光标选中多行 (像 sublime 一样) vscode同时选中多行输入,Alt+左键选中多行 Alt+Shift 竖列选择 Shift+Ctrl 竖列...
  • layui 重置checkbox全部选中和未选中

    千次阅读 2018-12-14 09:05:46
    全部不选中 $(".checkboxs").each(function(){ $(this).prop('checked', false); }); 全部选中 $(".checkboxs").each(function(){ $(this).prop('checked', false); ...
  • 在一个项目中要实现TabLayout的初始全部Tab都不选中状态 去看TabLayout的API愣是没找到设置全部不选中的属性和方法 最后发现 tabLayout.addTab(Tablayout.Tab tab,boolean setSelected)方法 可以通过第二个...
  • 昨天在使用easyui的过程中出现一个问题,就是当我需要使用复选框批量处理数据时,要求只有复选框选中的数据才可以处理,结果发现当单击数据时,数据也会被选中,后来百度发现有人说SelectOnCheck属性与CheckOnSelect...
  • echart 默认选中legend及其选中事件

    万次阅读 2016-05-18 09:11:27
    echart的 legend默认选中选中事件
  • checkbox 选中和不选中的值分别设置

    千次阅读 2020-07-07 11:17:31
    轻松解决选中和未选中checkbox的value一样的问题 <input type="checkbox" value="uncheck" name="check" onclick="this.value=(this.value=='uncheck')?'checked':'uncheck'">
  • radio取消选中并能再次选中

    千次阅读 2018-05-09 17:28:11
    网上很多都是只能取消选中,之后就无法选中了。 按照这个方法可以再次选中 $(document).ready(function(){ var old = null; //用来保存原来的对象 $(".radioCheck").each(function(){//循环绑定事件...
  • 1、在data中创建 selectArr : [ ] 数组 “selectColor”是选中后的文字样式 <li v-for="(item,index) in reasons" :key="index"> <div @click="selectReason(item,index)" :class="se...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,228,770
精华内容 491,508
关键字:

选中