声明:下面的例子是本人自己写的,使用<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>
分享到:
相关推荐
一款非常好看的jQuery单选按钮和复选按钮美化效果,精装单选框复选框美化代码。
jQuery表单美化定制单选按钮与复选框美化特效 jQuery表单美化定制单选按钮与复选框美化特效 jQuery表单美化定制单选按钮与复选框美化特效 jQuery表单美化定制单选按钮与复选框美化特效
这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。
单选按钮以及复选按钮的使用情况还是蛮多的,接下来为大家介绍下通过JQuery操作单选按钮和复选按钮,希望对大家有所帮助
JQ表单美化定制单选按钮与复选框美化特效
jQuery插件逐渐增强的单选按钮和复选框
利用jQuery实现的美化版单选框和复选框,样式风格非常简洁清爽,是一款很不错的jQuery按钮插件。
jQuery自定义单选按钮复选框代码是一款改变单选按钮 复选框样式,适合新手,代码量非常少。
jQuery 修改复选框 单选按钮 傻瓜代码 直接可用
jQuery单选框和复选框美化代码是一款基于ui-choose.js实现的表单单选框,复选框美化插件,支持原生select标签和ul标签美化,并且能很方便的获取选中的值。
插件描述:一款使用html5 svg技术的modernizr.js打造的各种单选按钮和复选框的动画效果。参考示例:http://www.jq22.com/jquery-info4527
<form> 单选框 <i class='input_style radio_bg'><input type="radio" name="hot" ... 这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。
Labelauty是一款轻量级的jQuery单选按钮和复选框美化插件。该jquery美化插件允许你自定义每一个check状态的labels。也就是说选中和未选中状态的文字是动态变化的。Labelauty采用扁平化设计风格,非常时尚漂亮。
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
jQuery单选复选框样式美化,对单选按钮和复选框可进行美化,样式个人觉得还可以!
jQuery模拟iphone单选框复选框效果,jQuery,iphone,单选框,复选框,表单按钮.
iCheck自定义复选框和单选按钮组件(jQuery),它避免在日常开发中重复造轮子,在数量庞大的浏览器,设备和它们的不同版本中,它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定义输入。兼容主流...
实现了对网页中最常见的多复选框的选定,另外笔者对此进行了改善,使全选与单选的复选框的选中效果更加动态。
jquery.icheck.js复选框样式和单选按钮样式代码