zoukankan      html  css  js  c++  java
  • JS/JQuery针对不同类型元素的操作(radio、select、checkbox)

    一、select下拉框

      I:javascript方法

       1:获取选中的值

        F1:

          var  myselect=document.getElementById("test");或者var myselect = document.all["test"];

          var index=myselect.selectedIndex ;    // selectedIndex代表的是你所选中项的index

          myselect.options[index].value;

          myselect.options[index].text;

        F2:

        var selectoptions = document.getElementById("select_id").options;  

            for(var i = 0 ; i<selectoptions.length;i++){  

         if(selectoptions[i].selected){  

                    alert(selectoptions[i].value);  

                }  

             }  

       2:赋值

        var select= document.getElementById("select_id");   

    •    
    • for(i=0;i<select.length;i++){//给select赋值
    •         if("selectValue"==select.options[i].value){
    •           select.options[i].selected=true  
    •        
    •  }  
    •        
    • }

      II:jquery方法(前提是已经加载了jquery库)

       1:获取选中的值 

         F1:$("#select_id").val()

         F2:var options=$("#test option:selected");  //获取选中的项。  alert(options.val());   //拿到选中项的值

         F3:$("select[name='xxx']").find("option:selected").val();//$("select[name='xxx']").find("option:selected").text();

       2:赋值

        F1:$("#select_id").val("xx");

        F2:$("#select_id").get(0).selectedIndex =1;

        F3:$("#select_id").find("option[text='pxx']").attr("selected",true);

       3:jQuery添加/删除Select的Option项:

        $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
        $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
        $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
        $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
        $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
        $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

    二、单选框radio

      I:javascript方法

       1:获取选中的值

        var radio = document.getElementsByName("radio_name");  

          for (i=0; i<radio.length; i++) {  

         if (radio[i].checked) {  

                  alert(radio[i].value)  

              }  

          } 

       2:赋值

        var ridaolen=document.thisform.radio_name.length;
             for(var i=0;i<ridaolen;i++){
                if(sex==document.thisform.radio_name[i].value){
                    document.thisform.radio_name[i].checked=true
                }
              } 

      II:jquery方法

       1、获取选中值:

        F1:$("input:radio[name='radio_name']:checked").val();

        F2:$("input[name='radio_name']:checked").val(); 

        F3:$('input:radio:checked').val();和$("input[type='radio']:checked").val();

       2、判断单选框是否选中:$('input:radio[name="radio_name"]').is(":checked");//is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

       3、赋值:$("input[name='radio_Name'][value=2]").attr("checked",true); 

    三、复选框checkbox

      I:javascript方法

       1:获取选中值

        function getValue(){  

         var myCheckboxs= document.getElementsByName("myCheckbox");  

         var value;  

         for (i=0; i<myCheckboxs.length; i++){  

          if (myCheckboxs[i].checked){  

           if (!value){  

                       value = myCheckboxs[i].value;  

                   } else {  

                         value += "," + myCheckboxs[i].value;  

                    }  

                }  

           }  

           alert(value == undefined ? '' : value);  

         }

       2:全选

        function selectAll(){
         var myCheckboxs = document.getElementsByName("myCheckbox");
         for (i=0; i<myCheckboxs.length; i++){
          myCheckboxs[i].checked = true;
         }
        }

       3:反选  

        function selectOther(){
         var myCheckboxs = document.getElementsByName("myCheckbox");
         for (i=0; i<myCheckboxs.length; i++){
          if (myCheckboxs[i].checked){
           myCheckboxs[i].checked = false;
          } else {
           myCheckboxs[i].checked = true;
          }
         }
        }

       4:判断是否全选 

        function isSelectAll(){
         var myCheckboxs = document.getElementsByName("myCheckbox");
         for (i=0; i<myCheckboxs.length; i++){
          if (!myCheckboxs[i].checked){
           return false;
          }
         }
         return true;
        }

       5:添加复选框

        function addCheckbox(divId){
         var otherCheckbox=document.createElement("input");
         var myText=document.createTextNode("复选框text");
         otherCheckbox.setAttribute("type","checkbox");
         otherCheckbox.setAttribute("id","myCheckbox");
         otherCheckbox.setAttribute("value","xxx");
         var mydiv=document.getElementById(divId);
         mydiv.appendChild(otherCheckbox);
         mydiv.appendChild(myText);
        }

      II:jquery方法

       1:获取单个checkbox选中项
        F1:$("input:[name='ck']:checked").val();
        F2:$("input:checkbox:checked").val();//$("input:[type='checkbox']:checked").val();
       2:获取多个checkbox选中项
        $("input:[name='ck']").each(function() {
         if ($(this).attr('checked') ==true) {
          alert($(this).val());
         }
        });

       3:赋值
        (1)设置第一个checkbox 为选中值:
          $('input:checkbox:first').attr("checked",'checked');
          $('input:checkbox').eq(0).attr("checked",'true');
        (2)设置最后一个checkbox为选中值:
          $('input:checkbox:last').attr('checked', 'checked');
          $('input:checkbox:last').attr('checked', 'true');
        (3)根据索引值设置任意一个checkbox为选中值:
          $('input:checkbox).eq(索引值).attr('checked', 'true');
          $('input:checkbox').slice(1,2).attr('checked', 'true');
        (4)根据Value值设置checkbox为选中值:
          $("input:checkbox[value='1']").attr('checked','true');

       4:删除
        (1)删除Value=1的checkbox
          $("input:checkbox[value='1']").remove();
        (2)删除第几个checkbox
          $("input:checkbox").eq(索引值).remove();
       5:遍历checkbox
        $('input:checkbox').each(function (index, domEle) {
          //写入代码
        });
       6:全部选中
        $('input:checkbox').each(function() {
          $(this).attr('checked', true);
        });
       7:全部取消选择
        $('input:checkbox').each(function () {
          $(this).attr('checked',false);
        });

  • 相关阅读:
    VMware 中安装Centos
    go with go
    [APIO2012]派遣【左偏树】
    后缀自动机三·重复旋律6
    AC自动机(二次加强版)
    [HAOI2016]找相同字符【GSAM广义后缀自动机】
    吉司机线段树【学习笔记】
    [ZJOI2015]诸神眷顾的幻想乡【GSAM】
    广义后缀自动机(广义 SAM)【模板】
    Important Sisters【HDU-4694】【Dominator Tree】
  • 原文地址:https://www.cnblogs.com/zhaoyhBlog/p/6211876.html
Copyright © 2011-2022 走看看