zoukankan      html  css  js  c++  java
  • 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值
      }

      

  • 相关阅读:
    如何做实时监控?—— 参考 Spring Boot 实现
    如何做实时监控?—— 参考 Spring Boot 实现
    spring boot application properties配置详解
    Jrebel 6.2.1破解
    智能社-JS -wiki
    hibernate.properties
    Tomcat 的 socket bind failed的解决方法
    js 排序 SORT 各种方法
    java EE 如何使用Eclipse启动一个项目
    2016-06-06 数组的几个重要方法
  • 原文地址:https://www.cnblogs.com/meihuizi/p/5137571.html
Copyright © 2011-2022 走看看