jquery学习对单选按钮和复选按钮的操作

来源:互联网 发布:it发展趋势 编辑:程序博客网 时间:2024/05/16 08:13

 

声明:下面的例子是本人自己写的,使用<script src="<%=basepath %>work/jquery-1.7.1.min.js"></script>

这个版本,例子也许和别人讲的不太一样,但是都经过本人测试!

 

注:在下面的例子中一定要注意=和==的区别,前者赋值,后者判断。

 

<table>                     <tr>                     <td>                        作业标题:<input type="text" id="worktitle" value=""/>    <br>                        老师:        <input type="text" id="teacher"  value=""/>    <br>         课程名称:<input type="text" id="course"  value="">    <br>                     学生姓名:   <select name="student" id="student" >                       <option>...请选择</option><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select><br>学生 性别:<input type="radio" name="sex" value="男" /> 男            <input type="radio" name="sex" value="女" /> 女  <br />球类:<input type="checkbox" name="balls" value="football"/>  足球<input type="checkbox" name="balls" value="basketball"/> 篮球 <input type="checkbox" name="balls" value="badminton"/> 羽毛球 <input type="checkbox" name="balls" value="pingpong"/> 乒乓球                         批改日期:从<input type="text" id="reviewdatefrom"    value="">    <br>                        到:<input type="text" id="reviewdateto"    value="">    <br>                                    <br>                        <input type="button" onclick="querywork()"  value="查询"/>                        <br><input type="button" id="radiovv"  onclick="getsexvalue()" value=" 测试sex值">                        <br><input type="button" id="ccc"  onclick="getballsvalue()" value=" 测试球类值">             </td>             </tr>         </table><script>/*//对单选按钮设置默认值--js实现var rrr=document.getElementsByName("sex");alert(rrr[0].value);rrr[0].checked=true;//获取单选按钮组的值--js实现function getsexvalue(){  var seind=-1;  var value="";  var radio=document.getElementsByName("sex");  for(var i=0;i<radio.length;i++){if(radio[i].checked==true){  value=radio[i].value;  seind=i;  break;}  }  if(seind==-1){  value=radio[0].value;  }  alert(value);  return value;} *////////////////////////////以下是通过jquery操作单选按钮。////////////////////////*//radio-1 数据初始化选择。(通过value的值)$('[name="sex"]:radio').each(function() {    if (this.value == '女') {      this.checked = true;   } });*///radio-2 数据初始化选择,也可以通过index来确定那个被选中.var dan=$('[name="sex"]:radio');dan[1].checked=true;/*//radio-3 直接获取值 function getsexvalue() {var sed=$('[name="sex"]:checked:radio').val();alert('获得的单选按钮值为:' + sed); }*///radio-4 下面用遍历的方法/*function getsexvalue() {//var sed=$('[name="sex"]:radio');$('[name="sex"]:radio').each(function() {    if (this.checked ==true) {        alert(this.value+"--选中了");   }else{   alert(this.value+"--没选中");   }});}*///radio-5 下面用遍历的方法,判断它的值,并设置它的选中状态function getsexvalue() {//var sed=$('[name="sex"]:radio');$('[name="sex"]:radio').each(function() {    if (this.value =='男') {        this.checked =true;       alert("设置这个选中--"+this.value);   }else{   this.checked =false;   alert("设置这个未选中--"+this.value);   }});}////////////////////////以下是jquery复选框操作//////////////////////checkbox-1 设置初始选中值var chk=$('[name="balls"]:checkbox');//chk[0].checked=true;//chk[1].checked=true;//checkbox-2 下面可以全部设置成选中chk.attr("checked", true);/*//checkbox-3 遍历获取值function getballsvalue(){$('[name="balls"]:checkbox').each(function() {    if (this.checked ==true) {        alert(this.value+"--选中了");   }else{   alert(this.value+"--没选中");   }});}*///checkbox-4 遍历获取值,并根据值来设置其选中状态function getballsvalue(){$('[name="balls"]:checkbox').each(function() {    if (this.value =='football') {        this.checked =true;       alert("设置这个选中--"+this.value);   }else{   this.checked =false;   alert("设置这个未选中--"+this.value);   }});}</script>