Jquery中的checkbox 及radio的问题

  在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值
  }

  

时间: 01-16

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

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

在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input[type='checkbox']").is(':checked') 返回true或false attr()方法  设置或者返回备选元素的值 attr(属性名)    //获取属性的值 attr(属性名,属性值)   //设置属性的值 ---- $("#id]").attr(&q

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

由于Jquery的版本更新很快,代码的写法也改变了许多,以下Jquery代码适query1.4版本以上Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $("input[name='rd']:checked").val(); 2.设置第一个Radio为选中值: $('input:radio:first').attr('check

jQuery中对checkbox设置checked无用解决办法

1. 对html中的多选框设置选择和取消选择,如  $("#id").attr('checked',true);$("#id").attr('checked',false).如果在调试栏中查看elements属性,可以看出,checked是已经设置成功了的,但是在html中不能表现出来. 2. 解决办法 :用prop设置.prop的值为ture或者false.方法如下: $("#id").prop('checked',true); $("

Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值

jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked")

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一个全面的代码总结. 一.Jquery 对 CheckBox 的操作: <input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox&q

转 Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值

jquery取radio单选按钮的值   $("input[name='items']:checked").val();  另:判断radio是否选中并取得选中的值  如下所示: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){   alert("yes--选中的值为:"+$(":radio:checked&

JQuery 设置checkbox select radio 为“只读”

JQuery  设置checkbox select radio 为“只读”,通过测试知道使用HTML标签的 text 和 textarea .button 可以设置readonly="readonly"属性. 但是checkbox .select. radio 这三个控件使用起来不能使用readonly="readonly"属性,只有 disabled="disabled"可以使用. 这样就出现问题了.又想不让修改,又想在后台获取值.如果使用di

深入理解ajax系列第九篇——jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj

Jquery中each的三种遍历方法

Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(data) { $.each(data, function(n,value) { });}); 1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,dom