Jquery实际应用，判断radio，selelct，checkbox是否选中及选中的值

来源：互联网发布：道之出口淡乎其无味编辑：程序博客网时间：2024/06/01 08:13

jquery取radio单选按钮的值  $("input[name='items']:checked").val();  另：判断radio是否选中并取得选中的值 如下所示： function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){   alert("yes--选中的值为："+$(":radio:checked").val()); } }  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的项目为当前选中项    $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option   $("#sel").empty()；//清空下拉框       刚开始接触jquery，很多东西不熟悉    在用$("#id")来获得页面的input元素的时候，发现$("#id").value不能取到值      后来终于在伟大的百度帮助下，找到了问题的原因：    $("")是一个jquery对象，而不是一个dom element       value是dom element的属性     jquery与之对应的是val      val() :获得第一个匹配元素的当前值。     val(val):设置每一个匹配元素的值。      所以，代码应该这样写：      取值：val = $("#id")[0].value;    赋值：  $("#id")[0].value = "new value";    或者$("#id").val("new value");      或者这样也可以：val = $("#id").attr("value"); jQuery中each非常好用，常用它取代javascript的for循环 例如在一个function里有一个each,在each里某种条件 成立的话，就把这个function返回true或者false function methodone(){ .... $.each(array,function(){ if(条件成立){ return true; } }); .... } 结果发现老是不对。 后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用其它的方式 break----用return false; continue --用return ture; 所以当我在each里想使用return true给这个function返回时，其实只是让each继续执行而以 连each都没有中断，所以function也就不能return了  另：判断radio是否选中并取得选中的值 如下所示： function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){   alert("yes--选中的值为："+$(":radio:checked").val()); } }

转自：http://www.oschina.net/code/snippet_179497_6635

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery radio</title> <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script> <script type="text/javascript" language="javascript">  /*------判断radio是否有选中，获取选中的值--------*/     $(function(){          $("#btnSubmit").click(function(){             var val=$('input:radio[name="sex"]:checked').val();             if(val==null){                 alert("什么也没选中!");                 return false;             }             else{                 alert(val);             }             var list= $('input:radio[name="list"]:checked').val();             if(list==null){                 alert("请选中一个!");                 return false;             }             else{                 alert(list);             }                     });      }); </script> </head>   <body> <form id="form1" > <input type="radio"  name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <br /> <input type="radio"  name="list" value="十分满意" />十分满意 <input type="radio" name="list" value="满意" />满意 <input type="radio" name="list" value="不满意" />不满意 <input type="radio" name="list" value="非常差" />非常差 <br /> <input type="submit" value="submit"  id="btnSubmit" /> </form> </body> </html>

转自：http://blog.csdn.net/snihcel/article/details/7454221

下面先介绍了很多jquery获取select属性的方法，同时后面的实例我们讲的是jquery 获取下拉框值与select text代码。jquery获取select选择的文本与值获取select ：获取select 选中的 text :   $("#ddlregtype").find("option:selected").text();获取select选中的 value:   $("#ddlregtype ").val();获取select选中的索引:     $("#ddlregtype ").get(0).selectedindex;设置select:设置select 选中的索引：     $("#ddlregtype ").get(0).selectedindex=index;//index为索引值设置select 选中的value：    $("#ddlregtype ").attr("value","normal“);    $("#ddlregtype ").val("normal");    $("#ddlregtype ").get(0).value = value;设置select 选中的text:var count=$("#ddlregtype option").length;for(var i=0;i<count;i++)      {           if($("#ddlregtype ").get(0).options[i].text == text)         {             $("#ddlregtype ").get(0).options[i].selected = true;                       break;         }     }$("#select_id option[text='jquery']").attr("selected", true);设置select option项:$("#select_id").append("<option value='value'>text</option>"); //添加一项option$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option$("#select_id option:last").remove(); //删除索引值最大的option$("#select_id option[index='0']").remove();//删除索引值为0的option$("#select_id option[value='3']").remove(); //删除值为3的option$("#select_id option[text='4']").remove(); //删除text值为4的option清空 select:$("#ddlregtype ").empty();工作需要，要获得两个表单中的值。如图：如何获得从左边选择框添加到右边选择框中的值？我想了想用网页特效可以获得，这里用了比较流行的jquery。js代码如下：//获取所有属性值 var item = $("#select1").val();   $(function(){$('#select1').each( //获得select1的所有值     function(){         $('button').click(function(){            alert($('#select2').val()); //获得select2中的select1值        });                });        })</script>值得注意的是，不能直接写成$(function(){$('#select2').each( //获得select1的所有值，因为前面讲选项从左边添加到右边，jquery其实并没有真正将值从左边传到右边。     function(){         $('button').click(function(){            alert($(this).val()); //获得select2中的select1值        });                });        })html：<div class="centent">        <select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">            <option value="1">选项1</option>            <option value="2">选项2</option>            <option value="3">选项3</option>            <option value="4">选项4</option>            <option value="5">选项5</option>            <option value="6">选项6</option>            <option value="7">选项7</option>        </select>        <div>            <span id="add" >选中添加到右边>></span>            <span id="add_all" >全部添加到右边>></span>        </div>    </div>    <div class="centent">        <select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">        </select>        <div>            <span id="remove"><<选中删除到左边</span>            <span id="remove_all"><<全部删除到左边</span>        </div>    </div>

转自：http://blog.csdn.net/snihcel/article/details/7454950