`

jquery技巧:操作单选框,复选框,下拉列表 2

阅读更多

var cc1   = $(".formc select [@name='country'] option[@select ed]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
   alert($(this).val());
   });

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾


当然jquery的选择器是强大的. 还有很多方法.
另外我自己也写过一个jquery的复选框小插件 .嘿嘿.可以参考参考.
http://www.cssrain.cn/demo/jquery-check/checkbox.html

<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
       //alert("Hello");
       //alert($("#selectTest").attr("name"));
       //$("a").attr("href","xx.html");
       //window.location.href="xx.html";
       //alert($("#selectTest").val());
       alert($("#selectTest option[@selected]").text());
       $("#selectTest").attr("value", "2");

});
});
</script>


<a href="#">aaass</a>



<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>

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;
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的项目为当前选中项
            $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
            $("#sel").empty();//清空下拉框

获取一组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();//清空下拉框

 

http://www.littlefu.cn/web/qxj/viewthread.php?tid=204

分享到:
评论

相关推荐

    jquery操作单选、复选、下拉列表

    本文将详细介绍如何利用jQuery进行单选框(radio)、复选框(checkbox)以及下拉列表(select)的操作。 #### 二、下拉列表操作 下拉列表在网页表单中是非常常见的元素之一。jQuery提供了多种方法来操作这些元素。...

    jquery取单选,复选,下拉小结

    这篇博客"jquery取单选,复选,下拉小结"是关于如何使用jQuery来操作网页中的单选按钮(radio)、复选框(checkbox)以及下拉列表(select)的选择项。下面我们将详细探讨这些知识点。 首先,我们来讨论如何使用...

    文本框 单选框 复选框 下拉框

    在IT界,尤其是在网页设计和开发领域,"文本框、单选框、复选框和下拉框"是构建用户界面(UI)时不可或缺的基本元素。这些组件是用户与应用程序或网站交互的主要方式,用于输入数据、做出选择或执行特定操作。让我们...

    jquery 复选框组件

    jQuery UI提供了一套完整的UI元素样式,包括自定义的复选框和单选按钮。 #### jQuery UI Multiselect 插件 jQuery UI Multiselect是jQuery UI的一个扩展,它将传统的多选框转变为可配置的下拉列表,提升了用户体验...

    jquery 操作单选框,复选框,下拉列表实现代码

    在本篇文章中,我们将探讨如何使用 jQuery 操作三种常见的表单元素:单选框(Radio)、复选框(Checkbox)以及下拉列表(Select)。 1. **复选框全选/反选操作** - HTML 部分:创建多个同名的复选框,通常用于多选...

    基于easyui 1.4.5的单选和多选框组件

    本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架,它包含了多个可复用的UI组件,如...

    jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

    在上述描述中,已经展示了如何使用jQuery来操作下拉列表、文本框、复选框和单选框的值,包括获取、添加、删除和遍历等操作。这些操作对于制作动态网页表单、提升用户体验以及处理表单数据非常有用。而在实际应用中,...

    jQuery操作下拉列表框

    对于其他类型的表单元素,如单选框和复选框,jQuery同样提供了便捷的API: - 单选框: - `$("input[@type=radio][@checked]").val()`:获取选中项的值。 - `$("input[@type=radio][@value=2]").attr("checked",'...

    下拉复选框

    在这个场景中,我们看到一个自定义开发的下拉复选框插件,使用了Java和jQuery这两种技术。接下来,我们将深入探讨下拉复选框的实现原理以及Java和jQuery在这其中的角色。 首先,让我们理解下拉复选框的基本概念。在...

    Jquery針對下拉列表操作大全

    - **Checkbox复选框**: - 获取选中项的值:`var item = $("#checkbox_id").attr("value");` - 设置选中状态:`$("#chk1").attr("checked",'');`(取消选中)或`$("#chk1").attr("checked",true);`(选中) - **...

    基于jquery实现的自定义风格的下拉列表框.zip

    - **多选支持**: 支持同时选择多个选项,提供复选框或单选按钮。 - **分页加载**: 当选项过多时,可以采用分页加载策略,提高页面性能。 4. **文件解析** - 132686935518827840: 这个文件可能是项目的源代码,...

    240多个jQuery插件

    10. jQuery Checkbox manipulation:复选框操作。 11. jTagging:标签输入。 12. jQuery labelcheck:自定义标签样式。 13. Overlabel:覆盖文本输入。 14. 3 state radio buttons:三态单选按钮。 15. ...

    下拉多选框(jquery)

    这个插件允许在下拉菜单中添加复选框,从而实现多选功能,并且兼容多种浏览器,提高了用户体验。 在使用这个插件时,你需要了解以下几个关键知识点: 1. **jQuery基础**:首先,你需要熟悉jQuery的基本语法,包括...

    jQuery.Sumoselect插件实现下拉复选框效果

    jQuery.Sumoselect是一款强大的jQuery插件,专门用于创建具有下拉复选框功能的跨设备、跨浏览器的下拉列表框。它不仅提供了基础的单选和多选功能,还具备高度可定制性,能够适应各种设备上的显示需求,确保在Android...

    jquery自定义风格独特的下拉列表控件(可实现单选和多选).zip

    本资源"jquery自定义风格独特的下拉列表控件(可实现单选和多选).zip"提供了一个使用jQuery实现的自定义下拉列表控件,该控件具有独特的设计风格,并支持单选和多选功能,极大地增强了用户界面的交互性和美观性。...

    JQuery操作三大控件(下拉,单选,复选)的方法

    标题中提到的知识点是关于JQuery操作三大控件的方法,具体包括下拉列表(DropDownList)、单选按钮(Radio)和复选框(CheckBox)。在描述中提到这些操作涉及示例代码,并希望对读者有所帮助。标签则提示了主要...

    带复选框的combox控件

    总之,带复选框的ComboBox控件是UI设计中一种实用且灵活的元素,通过结合复选框与ComboBox的功能,提高了用户在多选场景下的操作便捷性。无论是桌面应用还是网页开发,理解和掌握这种控件的实现方式都能提升软件的...

Global site tag (gtag.js) - Google Analytics