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);
　　　　});

转载于:https://www.cnblogs.com/zhaoyhBlog/p/6211876.html