在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例:

  一、checkbox

  <input id="check1" class="othercheck" type="checkbox" name="othercheck" value="1">1

  1.判断单个已知checkbox是否选中

  var ischeck=$("#check1").is(':checked');//获取此checkbox是否选中,被选中则 ischeck=true  反之为 false

  2.判断多个name=test的checkbox是否选中

  function judgechecked(){ 
    var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象,返回数组 
    //取到对象数组后,我们来循环检测它是不是被选中 
    var s=''; 
    for(var i=0; i<obj.length; i++){ 
      if(obj[i].checked)

        s+=obj[i].value+','; //如果选中,将value添加到变量s中 
    } 
    //那么现在来检测s的值就知道选中的复选框的值了 
    alert(s==''?'你还没有选择任何内容!':s); //条件运算符
    }

  3.//jquery获取复选框值

  function getcheckval(){
      var chk_value =[]; 
      $('input[name="test"]:checked').each(function(){ 
        chk_value.push($(this).val()); //
      }); 
      alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value); 
    }

  或者获得拼接字符串

  function getcheckval(){

    var str=""; 
    $("[name='checkbox'][checked]").each(function(){ 
      str+=$(this).val()+",";
    }) 
    alert(str); 
    })

  4.全选

    1)点击button全选

    $("#btn1").click(function(){ 
      $("[name='checkbox']").attr("checked",'true');//全选 
    }) 
    $("#btn2").click(function(){ 
      $("[name='checkbox']").removeAttr("checked");//取消全选 
    })

    2)选中checkbox全选及取消

    <input id="checkAll" type="checkbox" onclick="checkAll('checkbox')" name="checkAll">//选中触发checkAll()函数,选中所有name为checkbox的复选框

    function checkAll(checkname){
        var checkid = document.getElementById("checkAll")
        var check = document.getElementsByName(Obj)
        if (checkid.checked){     
          $("[name='checkname']").attr("checked",'true');//全选
     }else{          
           $("[name='checkname']").removeAttr("checked");//取消全选
       }
    }

  5.给checkbox赋值

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

  $('input:checkbox').slice(0,2).attr('checked','true');//同时选中第一个和第三个checkbox

  $('input:checkbox:first').attr('checked','checked');//设置第一个checkbox为选中值

  $('input:checkbox:last').attr('checked','checked');//设置第一个checkbox为选中值

  $('input:checkbox[value='1']').attr('checked','true');//根据value值设置checkbox为选中

  $("input").attr("checked","checked");  
  $("input").attr("checked",true);

  6.删除操作

  $('input:checkbox[value='1']').remove();//删除value=1的checkbox

  $('input:checkbox').eq(索引值).remove();//索引值=0,1,2,删除第几个checkbox

  二、radio

  <input id="radiono" type="radio" value="1" name="isused">

  var isused=$('input:radio[name="isused"]:checked').val();//获取radio的value值

  分组: 只要name一样,就是一组的,即一组中只能选择一个

    <input type="radio" id="radio1" checked="checked" name="group1" />radio1 
    <input type="radio" id="radio2" name="group1" />radio2 
    <input type="radio" id="radio3" name="group1" />radio3

    var group1 = $("[name='group1']").filter(":checked"); 
    alert(group1.attr("id"));

  根据id选中radio

  $("#radio2").attr("checked", "checked");

  根据id取消选中radio

  $("#radio1").removeAttr("checked");

  一组中某一个被选中触发函数

  $("[name='group1']").on("change", 
    function (e) { 
      console.log($(e.target).val()); //得到选中值的value
    } 
  );

  任何元素都可以有点击事件onclick,在onclick中给函数传值  如

  <input id="57*1" type="radio" onclick="chkRadio(this)" value="5" name="radio1">

  var flag = true;
  function chkRadio(checkedradio) {//点击选中,再点击取消选中
      checkedradio.checked = flag;
      flag = !flag;
    }

  <img id="tttxx" onclick="isShowtheHidden(this.id);" src="/webStatic/image/back/hfk.png" style="margin-top: -20px;float:right;">

  function isShowtheHidden(id){
      id为被选中radio的id值
  }

  

Jquery中的checkbox 及radio的问题的更多相关文章

  1. jquery中选择checkbox拼接成字符串,然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

  2. Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox. Radiobutton . DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的 ...

  3. js jquery中判断checkbox是否被选中的方法

    在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input ...

  4. 二十四、小程序中改变checkbox和radio的样式

    来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...

  5. jQuery中的checkbox问题

    一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. Microsoft.Office.Interop.Excel 读取 excel 中的 checkbox 和 radio

    using Excel = Microsoft.Office.Interop.Excel; Excel.Application excelapp = new Excel.Application(); ...

  7. Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值

    1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $ ...

  9. Jquery中input:type=radio的监听,获取设置值

    一.html <div id='demo'> <input type='radio' name='sex' value='男' > <input type='radio' ...

随机推荐

  1. sqlite的简介

    第一步: 第二步,建立桥接文件 随便创建一个类,语言选择oc,然后它会问你是否创建桥接模式,然后你选择是就可以了 那个类可以删除了 在那份桥接文件中加入一句话#import <sqlite3.h ...

  2. leveldb 学习笔记之VarInt

    在leveldb在查找比较时的key里面保存key长度用的是VarInt,何为VarInt呢,就是变长的整数,每7bit代表一个数,第8bit代表是否还有下一个字节, 1. 比如小于128(一个字节以 ...

  3. POJ3694 Network(连通图+LCA)

    题目链接:http://poj.org/problem?id=3694 题目大意:给定一个图,每次添加一条边(可能有重边).输出每次添加后桥的 数目.由于添加边的次数比较多,添加一次Tarjin一次明 ...

  4. 使用yield关键字让自定义集合实现foreach遍历

    一般来说当我们创建自定义集合的时候为了让其能支持foreach遍历,就只能让其实现IEnumerable接口(可能还要实现IEnumerator接口) 但是我们也可以通过使用yield关键字构建的迭代 ...

  5. LSD-SLAM深入学习(2)-算法解析

    前言 在LSD-SLAM深入学习(1)中我们已经完成基本的安装与测试,在此我们继续解析算法与代码,由于lsd-slam本身利用了一部分李群与李代数的知识,需要一定的数学功底. 个人理解错误的地方还请不 ...

  6. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  7. 如何在在WinFrom的DataGridView中做到数据持续动态加载而不卡死

    1.在这个过程我用过好几种办法 (1)使用委托的办法,这个方法可以做到持续加载,但是效果不理想会卡死 (2)开启线程的方法,会造成卡死 (3)使用另一个窗体的线程做持续加载(子窗体),让子窗体作为一个 ...

  8. dedecms内容管理系统学习

    在复习完基础知识和学习了tp3.2之后,我们开始学习一些开源的产品,如dedecms:

  9. 第一课1、ROS

    ---恢复内容开始--- 1.什么是ROS ROS起源于2007年,斯坦福大学的人工智能实验室与机器人技术公司Willow Garage针对其个人机器人项目开发了ROS的雏形. ROS大致每年发布一个 ...

  10. 读Windows核心编程-5-作业

    作业(Job) 有时候需要把一些进程集中管理,如终止一个进程以及它产生的子进程,但由于Windows并没有维护进程间父子关系,所以除非进程本身以某种方式记录这些信息,否则很难做到管理这种父子进程树.而 ...