jquery操作 单选、复选、下拉

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端开发 文章标签： jquery function input javascript
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();

　　//

　　记性不好的可以收藏下：

　　1,下拉框:

　　var cc1 = $(".formc select[@name='country'] option[@selected]").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的选择器是强大的. 还有很多方法.

　　<script src="http://java.chinaitlab.com/base/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()；//清空下拉框

　　//得到select项的个数

　　jQuery.fn.size = function(){

　　return jQuery(this).get(0).options.length;

　　}

　　//获得选中项的索引

　　jQuery.fn.getSelectedIndex = function(){

　　return jQuery(this).get(0).selectedIndex;

　　}

　　//获得当前选中项的文本

　　jQuery.fn.getSelectedText = function(){

　　if(this.size() == 0) return "下拉框中无选项";

　　else{

　　var index = this.getSelectedIndex();

　　return jQuery(this).get(0).options[index].text;

　　}

　　}

　　//获得当前选中项的值

　　jQuery.fn.getSelectedValue = function(){

　　if(this.size() == 0)

　　return "下拉框中无选中值";

　　else

　　return jQuery(this).val();

　　}

　　//设置select中值为value的项为选中

　　jQuery.fn.setSelectedValue = function(value){

　　jQuery(this).get(0).value = value;

　　}

　　//设置select中文本为text的第一项被选中

　　jQuery.fn.setSelectedText = function(text)

　　{

　　var isExist = false;

　　var count = this.size();

　　for(var i=0;i<count;i++)

　　{

　　if(jQuery(this).get(0).options[i].text == text)

　　{

　　jQuery(this).get(0).options[i].selected = true;

　　isExist = true;

　　break;

　　}

　　}

　　if(!isExist)

　　{

　　alert("下拉框中不存在该项");

　　}

　　}

 

　　//设置选中指定索引项

　　jQuery.fn.setSelectedIndex = function(index)

　　{

　　var count = this.size();

　　if(index >= count || index < 0)

　　{

　　alert("选中项索引超出范围");

　　}

　　else

　　{

　　jQuery(this).get(0).selectedIndex = index;

　　}

　　}

　　//判断select项中是否存在值为value的项

　　jQuery.fn.isExistItem = function(value)

　　{

　　var isExist = false;

　　var count = this.size();

　　for(var i=0;i<count;i++)

　　{

　　if(jQuery(this).get(0).options[i].value == value)

　　{

　　isExist = true;

　　break;

　　}

　　}

　　return isExist;

　　}

　　//向select中添加一项，显示内容为text，值为value,如果该项值已存在，则提示

　　jQuery.fn.addOption = function(text,value)

　　{

　　if(this.isExistItem(value))

　　{

　　alert("待添加项的值已存在");

　　}

　　else

　　{

　　jQuery(this).get(0).options.add(new Option(text,value));

　　}

　　}

　　//删除select中值为value的项，如果该项不存在，则提示

　　jQuery.fn.removeItem = function(value)

　　{

　　if(this.isExistItem(value))

　　{

　　var count = this.size();

　　for(var i=0;i<count;i++)

　　{

　　if(jQuery(this).get(0).options[i].value == value)

　　{

　　jQuery(this).get(0).remove(i);

　　break;

　　}

　　}

　　}

　　else

　　{

　　alert("待删除的项不存在!");

　　}

　　}

　　//删除select中指定索引的项

　　jQuery.fn.removeIndex = function(index)

　　{

　　var count = this.size();

　　if(index >= count || index < 0)

　　{

　　alert("待删除项索引超出范围");

　　}

　　else

　　{

　　jQuery(this).get(0).remove(index);

　　}

　　}

　　//删除select中选定的项

　　jQuery.fn.removeSelected = function()

　　{

　　var index = this.getSelectedIndex();

　　this.removeIndex(index);

　　}

　　//清除select中的所有项

　　jQuery.fn.clearAll = function()

　　{

　　jQuery(this).get(0).options.length = 0;

　　}


yyixin
关注
专栏目录
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
10-26
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法
jquery操作单选、下拉框
2.wa
03-23 1332
jQuery获取Select选择的Text和Value: 语法解释： 1.  $("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发 2.  var checkText=$("#select_id").find("option:selected").text();   //获取Select选择
JQuery操作单选按钮，复选框，下拉款的操作
wangyijun1的专栏
06-23 747
JQuery中对option的添加、删除、取值 jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text()
jQuery对下拉框、单选框、多选框的处理
Linvo's blog
02-15 4491
本文出处：水水的博客——平凡的世界最近刚开始看JQ，今天偶尔看到这篇就转来了~下拉框：//得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(".formc select[@name=country] option[@selected]").text(); //得到下拉菜单的选中项的值var cc2 = $(.formc select[@name=
JQuery对单选框，复选框，下拉菜单的操作
ystyaoshengting的专栏
08-11 2304
近段时间在学习JQuery，作为笔记，写点东西，废话不多说了，下面是jsp，js，css代码，注释里写的已经很清楚了，不需要额外的再说了   JSP  String path = request.getContextPath();  String basePath
jquery 操作单选框，复选框，下拉列表实现代码
01-19
1、复选框全选操作：其实说到底就是对Jquery 选择器的运用，点我查看Jquery选择器 html代码: 代码如下: <form> 您爱好的运动是： <input type=”checkbox” name=”item” value=”football”/> ...
jquery取单选，复选，下拉小结
03-24
这篇博客"jquery取单选，复选，下拉小结"是关于如何使用jQuery来操作网页中的单选按钮（radio）、复选框（checkbox）以及下拉列表（select）的选择项。下面我们将详细探讨这些知识点。 首先，我们来讨论如何使用...
JQuery操作三大控件(下拉,单选,复选)的方法
10-27
标题中提到的知识点是关于JQuery操作三大控件的方法，具体包括下拉列表（DropDownList）、单选按钮（Radio）和复选框（CheckBox）。在描述中提到这些操作涉及示例代码，并希望对读者有所帮助。标签则提示了主要...
JQuery操作单选按钮以及复选按钮
专注、专心、专业
03-29 2164
单选按钮以及复选按钮在开发过程中会经常用到，下面我就来通过JQuery操作单选按钮和复选按钮： 单选按钮： 通过JQuery获取单选按钮对象我们总共有三种途径： ①ID：$("#radioId") ②NAME：$(":input[name='radioName']") ③TYPE：$("input[type=radio]")，可能在有的资料上面写的是：$(""input[@type=ra
基于jQuery下拉选择框插件支持单选多选
乐于学习、乐于分享、乐于总结
06-07 6305
由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui，先贴出主要代码 /** *下拉框插件-chooseList *调用插件的方式以及格式： * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件： * 参数说明： * $("#divID").chooseL
实现jQuery下拉选单的选取值
Xerale的博客
06-09 143
取得下拉选单的选取值
jquery操作select下拉框的多种方法(选中,取值,赋值等)
热门推荐
weixin_40821111的博客
08-17 1万+
11112222").appendTo("#sel")//添加下拉框的option。$("11112222
js/jquery中单选框、下拉框使用总结
轮回韩的博客
01-10 659
js/jquery中单选框、下拉框使用总结单选框 前言：jQuery中，prop()方法获取的是元素的属性（property）,而attr()获取的则是元素的特性(attribute)。selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法
Jquery判断radio，selelct，checkbox是否选中及选中的值
luozong05的专栏
12-14 948
jquery取radio单选按钮的值 $("input[name='items']:checked").val(); 另：判断radio是否选中并取得选中的值 如下所示： function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选
python 下拉列表单选框怎么获取元素_jQuery对下拉框、单选框、多选框的处理
weixin_39614262的博客
12-10 190
从本blog的日志可以看出，2007年初开始关注jQuery，已经有两年的时间了，在这两年时间里，更多的还是将jQuery当做一个很好用的工具直接运用到实际的项目和产品中。在这期间遇到过很多jQuery的问题，没有及时的记录下来，再次遇到的时候，依旧还是得重新来过。所以决定记录下来，方便我自己查阅，也方便他人。下拉框：//得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(".fo...
自定义EasyUI下拉单选和下拉多选控件
Super的博客
04-26 6342
在做web页面时常常会用到EasyUI增加页面的效果，今天自定义两个EasyUI的控件，下拉单选和下拉多选， 在使用EasyUI时需要引用EasyUI的样式和js ,提供一个下载地址http://www.jeasyui.net/download/ 废话不多说，直接切入主题下拉多选控件新建一个Web用户自定义控件WebSelection.ascx前台页面代码<%@ Control Language
js和jQuery分别实现 单选框、复选框、下拉列表的表单验证
jinchunzhao的博客
07-10 2433
关于页面表单验证:一些简单的理解单选框/复选框：js代码：$(function () { $("#Button").click(function () { var love = document.getElementsByName("love"); for(var i = 0; i&lt;love.length;i++){ if(lo...
jQuery实现下拉框并且带有复选框功能
咸鱼咸鱼咸
10-24 2972
因为项目上的需要，需要实现一个下拉框并且带有复选框功能，在网上找了找插件，没有找到合适的，所以就自己动手写了一个。写这个博客也相当于备份吧。 效果图如下： 这东西虽然没写过，但实际并不难所以也就没加什么注释了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 219
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
jQuery操作单选、复选及下拉列表教程
"这篇资料主要介绍了如何使用jQuery来操作HTML中的单选按钮、复选框以及下拉列表，包括添加、删除选项以及获取选中值等常见操作。内容经典实用，适合开发者参考收藏。" 在JavaScript库中，jQuery提供了一套简洁而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值