zoukankan      html  css  js  c++  java
  • 判断radio,select,checkbox是否选中的方法

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

      document.getElementById("checkboxID").checked 返回true或者false

    jQuery中:

      $("input[type='checkbox']").is(':checked') 返回true或false

     1、attr()方法 设置或者返回备选元素的值

      attr(属性名) //获取属性的值

      attr(属性名,属性值) //设置属性的值

      $("#id]").attr("checked") JQ1.6之后返回checked或者是undefined (1.6之钱返回true或者是false)

      $("input[type='checkbox']").attr("chacked",true); 将多选框设为全选中状态 false为不选中状态

     2、prop()方法
      $("input[type='checkbox']").prop("checked") 返回true或者false

      还有removeAttr(属性名)、removeProp(属性名)删除该属性

    例:

      $("input['tupe=checkbox']").removeAttr("checked");移除多选框的选中

    ================js和jq判断select是否选中、获取select选中的值=========
    js和jq判断select是否选中、获取select选中的值
    js和jq获取select选中的值
    JS部分
    var mySelect = document.getElementById(”testSelect”);//定位id(获取select)
    var index =mySelect.selectedIndex;// 选中索引(选取select中option选中的第几个)
    var text =mySelect.options[index].text; // 选中文本
    var value =mySelect.options[index].value; // 选中值
    mySelect.options[index].selected // 判断select中的某个option是否选中 true为选中 false 为未选中
    [html] view plain copy
    if(mySelect.options[1].selected == true){
    console.log(1)
    }

    JQ部分
    1.判断option是否被选中
    $("#id").is(":checked")//为false时是未被选中的,为true时是被选中

    $("#id").attr('checked')==undefined//为false时是未被选中的,为true时是被选中

    2.获取select选中的值
    $("#mySelect option:selected").text()

    $("#mySelect").find('option:selected').text()

    $("#mySelect").val();

    3.获取select选中的索引
    $("#mySelect").get(0).selectedindex

    4.添加option
    $("#mySelect").append("<option value="+value+">"+text+"<option>");

    5.删除option
    $("#myOption").remove()

    ==================================================================
    Jquery判断单选框是否选中和获取选中的值
    第一种:利用选中值判断选中
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery radio</title>
    <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
    <script type="text/javascript" language="javascript">
    /*------判断radio是否有选中,获取选中的值--------*/
    $(function(){
    $("#btnSubmit").click(function(){
    var val=$('input:radio[name="sex"]:checked').val();
    if(val==null){
    alert("什么也没选中!");
    return false;
    }
    else{
    alert(val);
    }
    var list= $('input:radio[name="list"]:checked').val();
    if(list==null){
    alert("请选中一个!");
    return false;
    }
    else{
    alert(list);
    }
    });
    });
    </script>
    </head>
    <body>
    <form id="form1" >
      <input type="radio" name="sex" value="男" />男
      <input type="radio" name="sex" value="女" />女
    <br />
      <input type="radio" name="list" value="十分满意" />十分满意
      <input type="radio" name="list" value="满意" />满意
      <input type="radio" name="list" value="不满意" />不满意
      <input type="radio" name="list" value="非常差" />非常差
    <br />
      <input type="submit" value="submit" id="btnSubmit" />
    </form>
    </body>
    </html>

    第二种:利用checked属性判断选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery radio</title>
    <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
    <script type="text/javascript">
    $(function () {
      $("input").click(function () {
        if ($(this).attr("checked")) {
          alert("选中了");
        }
      });
    });
    </script>
    </head>
    <body>
    <input type="radio"/>
    </body>
    </html>

    第三种:jquery获取单选框按钮的值
    $("input[name='items']:checked").val();
    function checkradio(){
    var item = $(":radio:checked");
    var len=item.length;
    if(len>0){
    alert("yes--选中的值为:"+$(":radio:checked").val());
    }
    }

    第四种:获取一组radio被选中的值
    var item = $('input[name=items][checked]').val();
    第五种:设置单选按钮被选中
    $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

    ==================================================================
    js中获取方法

    var obj = document.getElementByIdx_xx_x(”testSelect”); //定位id

    var index = obj.selectedIndex; // 选中索引

    var text = obj.options[index].text; // 选中文本

    var value = obj.options[index].value; // 选中值

    jQuery中获得选中select值

    第一种方式
    $('#testSelect option:selected').text();//选中的文本

    $('#testSelect option:selected') .val();//选中的值

    $("#testSelect ").get(0).selectedIndex;//索引

  • 相关阅读:
    hdu2717 Catch That Cow
    hdu1017
    Html5 学习笔记 【PC固定布局】 实战2 导航栏搜索区域
    Html5 学习笔记 【PC固定布局】 实战1 导航栏
    Html5 学习笔记 Sublime text3 和 Emmet 插件
    Html5 学习笔记 --》布局
    Html5 学习笔记 --》css3 学习
    Html5 学习笔记 --》html基础 css 基础
    数据库备份
    spring boot 尚桂谷学习笔记11 数据访问03 JPA
  • 原文地址:https://www.cnblogs.com/konglxblog/p/10011776.html
Copyright © 2011-2022 走看看