zoukankan      html  css  js  c++  java
  • JQuery中_Radio、DropDownList、Checkbox选择控件的处理

    Radio 

    1.获取选中值,三种方法都可以:

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

    2.设置第一个Radio为选中值:
    $('input:radio:first').attr('checked', 'checked'); 或者
    $('input:radio:first').attr('checked', 'true'); 注: attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
    3.设置最后一个Radio为选中值: $('input:radio:last').attr('checked', 'checked');
                  或者 $('input:radio:last').attr('checked', 'true');


    4.根据索引值设置任意一个radio为选中值:

    $('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true');

    5.根据Value值设置Radio为选中值
    $("input:radio[value='rd2']").attr('checked','true'); 或者
    $("input[value='rd2']").attr('checked','true');

    6.删除Value值为rd2的Radio
    $("input:radio[value='rd2']").remove();

    7.删除第几个Radio
    $("input:radio").eq(索引值).remove();索引值=0,1,2....
    如删除第3个Radio:$("input:radio").eq(2).remove();

    8.遍历Radio
    $('input:radio').each(function(index,domEle){ //写入代码 });
    DropDownList

    1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val(); 或者
    $('select#sel').find('option:selected').val(); 获取选中项的Text值:
    $('select#seloption:selected').text(); 或者
    $('select#sel').find('option:selected').text();

    2. 获取当前选中项的索引值:
    $('select#sel').get(0).selectedIndex;

    3. 获取当前option的最大索引值:
    $('select#sel option:last').attr("index")

    4. 获取DropdownList的长度:
    $('select#sel')[0].options.length; 或者
    $('select#sel').get(0).options.length;

    5. 设置第一个option为选中值:
    $('select#sel option:first').attr('selected','true') 或者
    $('select#sel')[0].selectedIndex = 0;

    6. 设置最后一个option为选中值:
    $('select#sel option:last).attr('selected','true')

    7. 根据索引值设置任意一个option为选中值: $('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....


    8. 设置Value=4 的option为选中值: $('select#sel').attr('value','4'); 或者
    $("select#sel option[value='4']").attr('selected', 'true');

    9. 删除Value=3的option: $("select#sel option[value='3']").remove();
    10.删除第几个option: $(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
    如删除第3个Radio: $(" select#sel option ").eq(2).remove();


    11.删除第一个option: $(" select#sel option ").eq(0).remove(); 或者
    $("select#sel option:first").remove();

    12. 删除最后一个option:
    $("select#sel option:last").remove();

    13. 删除dropdownlist:
    $("select#sel").remove();

    14.在select后面添加一个option:
    $("select#sel").append("<option value='6'>f</option>");

    15. 在select前面添加一个option: $("select#sel").prepend("<option value='0'>0</option>");

    16. 遍历option: $(' select#sel option ').each(function (index, domEle) { //写入代码 }); CheckBox

    1. 获取单个checkbox选中项(三种写法):
    $("input:checkbox:checked").val() 或者
    $("input:[type='checkbox']:checked").val(); 或者
    $("input:[name='ck']:checked").val();

    2. 获取多个checkbox选中项:
    $('input:checkbox').each(function() { if ($(this).attr('checked') ==true) { alert($(this).val()); } });

    3. 设置第一个checkbox 为选中值:
    $('input:checkbox:first').attr("checked",'checked'); 或者
    $('input:checkbox').eq(0).attr("checked",'true');

    4. 设置最后一个checkbox为选中值:
    $('input:radio:last').attr('checked', 'checked'); 或者
    $('input:radio:last').attr('checked', 'true');

    5. 根据索引值设置任意一个checkbox为选中值: $('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true');

    6. 选中多个checkbox: 同时选中第1个和第2个的checkbox:
    $('input:radio').slice(0,2).attr('checked','true');

    7. 根据Value值设置checkbox为选中值:
    $("input:checkbox[value='1']").attr('checked','true');

    8. 删除Value=1的checkbox: $("input:checkbox[value='1']").remove();

    9. 删除第几个checkbox: $("input:checkbox").eq(索引值).remove();索引值=0,1,2....
    如删除第3个checkbox: $("input:checkbox").eq(2).remove();

    10.遍历checkbox:
    $('input:checkbox').each(function (index, domEle) { //写入代码 });
    11.全部选中 $('input:checkbox').each(function() {
    $(this).attr('checked', true); });

    12.全部取消选择:
    $('input:checkbox').each(function () { $(this).attr('checked',false); });

     ===========================以下代码和上面大多是重复的=============================

    jQuery获取Select选择的Text和Value:

    语法解释:
    1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
    2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text

    3. var checkValue=$("#select_id").val();  //获取Select选择的Value

    4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值

    5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 

    jQuery设置Select选择的Text和Value:

    语法解释:
    1. $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中

    2. $("#select_id ").val(4);   //设置Select的Value值为4的项选中

    3. $("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中 
    jQuery添加/删除Select的Option项:
    语法解释:

    1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)

    2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)

    3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)

    4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)

    5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option 

    6. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option


    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 
    获取一组radio被选中项的值  var item = $('input[@name=items][@checked]').val(); 
    获取select被选中项的文本  var item = $("select[@name=items] option[@selected]").text(); 

    select下拉框的第二个元素为当前选中值 
    $('#select_id')[0].selectedIndex = 1; 

     $("#select_id'").attr("value", '12'); //设置value=12的项目为当前选中项
     $("select#select_id option:last").attr('selected', true);  //设置下拉列表中的最后一个值为当前选中

    radio单选组的第二个元素为当前选中值 
    $('input[@name=items]').get(1).checked = true; 
    获取值: 
      文本框,文本区域:$("#txt").attr("value"); 
    多选框checkbox:$("#checkbox_id").attr("value"); 

    单选组radio:   $("input[@type=radio][@checked]").val(); 

    下拉框select: $('#sel').val(); 
    控制表单元素: 
    文本框,文本区域:$("#txt").attr("value",'');//清空内容                  

    $("#txt").attr("value",'11');//填充内容 


    多选框checkbox: $("#chk1").attr("checked",'');//不打勾                 

      $("#chk2").attr("checked",true);//打勾                  

    if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 
    单选组radio:    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
    下拉框select:   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
                    $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 
                    $("#sel").empty();//清空下拉框

    -------------------------------------------------------------------

    //遍历option和添加、移除
    
    option function changeShipMethod(shipping){ 
    
    var len = $("select[@name=ISHIPTYPE] option").length 
    
    if(shipping.value != "CA"){ 
    $("select[@name=ISHIPTYPE] option").each(function(){
    
    if($(this).val() == 111){
    
    $(this).remove();
    
    } }); 
    }else{
    $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
    }
    }


    //取得下拉選單的選取值
    $(#testSelect option:selected').text();
    或$("#testSelect").find('option:selected').text();
    或$("#testSelect").val();

  • 相关阅读:
    java、maven环境搭建
    httpclient的get和post
    使用批处理命令定期清理删除指定后缀文件,释放空间
    WebService—规范介绍和几种实现WebService的框架介绍
    Delphi7 ADO面板上的控件简介
    sqlserver中判断表或临时表是否存在
    Delphi中Format与FormatDateTime函数详解
    delphi弹出信息框大全
    Delphi 日期时间函数
    Delphi7数据库编程之TDataSet(转)
  • 原文地址:https://www.cnblogs.com/zhangxp1129/p/3575877.html
Copyright © 2011-2022 走看看