Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值

最新推荐文章于 2016-09-22 16:01:00 发布

Rosanu

最新推荐文章于 2016-09-22 16:01:00 发布

阅读量1k

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

随着Jquery的作用越来越大，使用的朋友也越来越多。在Web中，由于CheckBox（复选框）、Radiobutton（单选组）、DropDownList（下拉框）等控件使用的频率比较高，就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快，代码的写法也改变了许多，以下Jquery代码适query1.4版本以上。

Radio    

<input type="radio" id="rd1" name="rd" value="2" checked="checked"></input>
<input type="radio" id="rd2" name="rd" value="0"/></input>
<input type="radio" id="rd3" name="rd" value="1"></input>
<input type="hidden" id="rd4" value=""/>

1.获取选中值，三种方法都可以：

 $('input:radio:checked').val()；

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

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

 $("input:radio[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


<select id="sel" name="sel" style="width:80px;">
 <option id="test" value="1" selected="selected">a</option>
 <option id="test" value="2">b</option>
 <option id="test" value="3">c</option>
 <option id="test" value="4">d</option>
 <option id="test" value="5">e</option>
</select>

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
 
<input type="checkbox" id="ck1" name="ck" value="2" checked="checked"></input>
<input type="checkbox" id="ck2" name="ck" value="0"/></input>
<input type="checkbox" id="ck3" name="ck" value="1"></input>
<input type="hidden" id="ck4" value=""/>

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

            }

        });

     或者

    $('input:checkbox').map(function () {
            return $(this).val();
 }).get().join(',') ;

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：www.2cto.com

 $("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);

 });

 

 

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
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()；//清空下拉框

    
<td><input type="radio" id="RebateTimeFlag0" name="RebateTimeFlag" value="0"  checked="checked" /></td>
<td><label for="RebateTimeFlag0">不支持</label></td>
<td><input type="radio" id="RebateTimeFlag1" name="RebateTimeFlag" value="1" /></td>
<td><label for="RebateTimeFlag1">支持(设定秒杀时限)</label></td>

//var RebateTimeFlag = $("input[name=RebateTimeFlag][checked]").val(); ie8不支持
var _val = $("input:radio[name=RebateTimeFlag][checked]").val();ie8支持

输入框单击后文字消失：

<input type="text" οnfοcus="if (this.value == 'Enter SomeThing') {this.value = '';}" 
οnblur="if (this.value == '') {this.value = 'Enter SomeThing';}" value="Enter SomeThing" name="" class=""/>