`
eoasis
  • 浏览: 78505 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery Select Check Radio 操作指南(转)

阅读更多

//遍历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();

//Query中取得checkbox组中被选中的值 

var selectText; 
$(":checkbox[name=yourcheckname]:checked").each(function(){ 
selectText+=$(this).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="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://blog.sina.com.cn/s/blog_64823cd50100i4qx.html

 

分享到:
评论

相关推荐

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    jquery 获得select、radio、checkbox选择的text和value值

    通过以上内容,我们可以了解到如何使用 jQuery 来操作 HTML 中的 `&lt;select&gt;`、`&lt;input type="radio"&gt;` 和 `&lt;input type="checkbox"&gt;` 元素。这些方法可以帮助开发者更轻松地处理表单数据,提高用户的交互体验。

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中,使用 ...以上就是使用 jQuery 对 `select`、`radio` 和 `checkbox` 元素进行操作的基本方法和技术要点。希望这些内容能帮助你在实际项目中更加高效地使用 jQuery。

    jQuery设置和获取select、checkbox、radio的选中值方法

    在众多表单元素中,select(下拉框)、checkbox(复选框)以及radio(单选按钮)是最常用的元素之一。jQuery作为一个功能强大的JavaScript库,其对这些表单元素的操作进行了极大的简化,提高了开发效率和用户体验。...

    jQuery常见的表单操作

    以下是一些常见的jQuery表单操作,包括处理复选框(Checkbox)、文本输入(Text)、单选按钮(Radio)以及下拉列表(Select): 1. **复选框(Checkbox)**: - `$("input[name='checkbox_name'][checked]")` 用于...

    jquery text,radio,checkbox,select操作实现代码

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画设计以及Ajax交互。本文将深入探讨如何使用 jQuery 对文本框、复选框、单选按钮和下拉框等表单元素进行操作。 1. **...

    Jquery操作radio,checkbox,select表单操作实现代码

    在网页开发中,jQuery库提供了一种简便的方式来操作HTML元素,包括处理表单元素,如radio、checkbox和select。本文将详细讲解如何使用jQuery来实现这些表单元素的操作。 首先,我们关注的是`select`元素。jQuery...

    Jquery 获取表单text,areatext,radio,checkbox,select值的代码

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

    jquery的checkbox,radio,select等方法小结

    在jQuery中,对HTML元素的操纵是前端开发中不可或缺的一部分,尤其对于`checkbox`、`radio`和`select`这些常见的表单控件,熟练掌握它们的jQuery操作至关重要。这里我们将详细探讨这些方法,帮助你更好地理解和应用...

    Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    总结一下,jQuery 提供了简单易用的 API 来操作网页上的 radio、checkbox 和 select 元素。通过 `.attr()` 方法可以改变选中状态,而 `:checked` 伪类结合 `.val()` 方法则用于获取选中项的值。这些功能使得动态交互...

    layui监听select变化,以及设置radio选中的方法

    本文将详细介绍如何使用layui监听select选择框的变化,以及如何设置radio单选按钮的选中状态。 ### 一、layui监听select变化 在layui中,监听select变化主要是通过`layui.form`模块提供的事件监听功能来实现。首先...

    240多个jQuery UI插件

    - **jQuery-Linked Select**: 实现两个或多个`&lt;select&gt;`元素的关联。 - **Auto-populate multiple select boxes**: 自动填充多选框中的选项。 - **替换选取框插件**: - **Choose Plugin (Select Replacement)**:...

    jQuery根据ID获取input、checkbox、radio、select的示例

    input: var xxx = $(‘#ID’).val() ——————————————————————————— checkbox: var xxx = [ ]; $('input[name=MyName]:checked).each(function(index, element) { xxx.push($(element)....

    jquery 学习

    本文档将详细介绍 jQuery 中与表单相关的常用函数和方法,特别是如何操作输入框(Input)、下拉列表(Select)、单选按钮(Radio)和复选框(Checkbox)等元素。 #### 二、操作Input输入框 在网页表单中,输入框是...

    jquery checkbox,radio是否选中的判断代码

    1:判断radio 代码如下: var selected = $(‘input[name=selectid:checked]’).val();//若未被选中 则val() = null if(selected == null){ alert&#40;“未选中!”&#41;; }else{ alert&#40;“选中!”&#41;; } 2:...

    240多个jQuery插件

    jQuery 是一个广泛使用的JavaScript库,它的核心理念是“写更少的代码,做更多的事情”。这个库因其轻量级和高效性而受到开发者们的青睐,压缩后的大小仅21k,支持包括Internet Explorer 6.0+、Firefox 1.5+、Safari...

    Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结

    function checkradio() { var item = $(':radio:checked'); var len = item.length; if (len &gt; 0) { alert("yes–选中的值为:" + $(':radio:checked').val()); } } ``` - **设置某个radio为选中状态**: ...

    jquery笔记详细

    本文档通过具体的代码示例和详细的解析介绍了 jQuery 在处理 DOM 操作方面的一些常用方法,包括选择器、节点操作、表单控件操作等内容。通过对这些方法的学习,可以帮助开发者更高效地完成前端开发任务。希望本文档...

Global site tag (gtag.js) - Google Analytics