首页 > 代码库 > JQuery操作表单控件
JQuery操作表单控件
1.jquery操作radio
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"> </script>
<title></title>
<!-- jquery判断哪个radio被选中 -->
<script type="text/javascript">
$(function(){
$(‘#button1‘).bind(‘click‘,function(){
var isChecked=$("input[name=‘radioall‘]").each(function(){
if($(this).attr(‘checked‘)==‘checked‘){
alert($(this).attr(‘value‘));
}
});
});
});
</script>
<!-- jquery判断哪个radio被选中 -->
<script type="text/javascript">
$(function(){
$(‘#button1‘).bind(‘click‘,function(){
var value=http://www.mamicode.com/$("input[name=‘radioall‘]:checked").val();
});
});
</script>
<!-- jquery选中取消radio -->
<script type="text/javascript">
2//选中
$(function(){
$(‘#button2‘).bind(‘click‘,function(){
$(‘#radio3‘).attr(‘checked‘,true);
});
//取消
$(‘#button3‘).bind(‘click‘,function(){
$(‘#radio3‘).attr(‘checked‘,false);
});
});
</script>
<!-- jquery获取radio属性 -->
<script type="text/javascript">
//获取值
$(function(){
$(‘#button4‘).bind(‘click‘,function(){
var value=http://www.mamicode.com/$(‘#radio4‘).attr(‘value‘);
alert(value);
});
});
</script>
<script type="text/javascript">
//获取值用,分隔
$(function(){
$(‘#button5‘).bind(‘click‘,function(){
var str=‘‘;
var value=http://www.mamicode.com/$("input[name=‘Checkbox8‘]").each(function(){
if($(this).attr("checked")==‘checked‘){
str += $(this).attr(‘value‘)+‘,‘;
}
});
var index=str.lastIndexOf(‘,‘);
str=str.substring(0,index);
alert(str);
});
});
</script>
</head>
<body>
<p>1.jquery判断哪个radio被选中</p><input id="button1" type="button" value="http://www.mamicode.com/button1"/>
<input type="radio" id="radio1" name="radioall" value="http://www.mamicode.com/radio1"/>radio1
<input type="radio" id="radio2" name="radioall" value="http://www.mamicode.com/radio2"/>radio2
<hr/>
<p>2.jquery选中取消一个radio</p><input id="button2" type="button" value="http://www.mamicode.com/选中"/><input id="button3" type="button" value="http://www.mamicode.com/取消"/>
<input type="radio" id="radio3" name="radio3" value="http://www.mamicode.com/radio3"/>radio3
<hr/>
<p>4.jquery获取radio的值</p><input id="button4" type="button" value="http://www.mamicode.com/获取"/>
<input type="radio" id="radio4" name="radio4" value="http://www.mamicode.com/radio4"/>radio4
<hr/>
</body>
</html>
jquery操作select
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"> </script>
<title></title>
<!-- jquery判断哪个option被选中 -->
<script type="text/javascript">
$(function(){
$(‘#button1‘).bind(‘click‘,function(){
var text1=$(‘#select1 option:selected‘).text();
alert("text1是"+text1);
var text2=$("#select1").find(‘option:selected‘).text();//等同上
alert("text2是"+text2);
var text3=$("#select1").text();
alert("text3是"+text3);
var value1=$("#select1").val();
alert("value1是"+value1);
var value2=$(‘#select1 option:selected‘).attr(‘value‘);
alert("value2是"+value2);
});
});
</script>
<!-- jquery选中option -->
<script type="text/javascript">
2//选中
$(function(){
$(‘#button2‘).bind(‘click‘,function(){
$("#select2 [value=http://www.mamicode.com/99]").attr(‘selected‘,‘selected‘);
//$("#select2").attr("value",‘88‘);设值有88的为选中项
});
});
</script>
<!-- jquery增加一个option -->
<script type="text/javascript">
2//选中
$(function(){
$(‘#button3‘).bind(‘click‘,function(){
$("<option id=‘15‘ value=http://www.mamicode.com/‘155‘>15").appendTo("#select3")//添加下拉框的option
});
});
</script>
<!--移除一个option -->
<script type="text/javascript">
2//选中
$(function(){
$(‘#button4‘).bind(‘click‘,function(){
$("#select4 [value=http://www.mamicode.com/133]").remove();
});
});
</script>
<!-- jquery清空option -->
<script type="text/javascript">
2//选中
$(function(){
$(‘#button5‘).bind(‘click‘,function(){
$("#select5").empty()
});
});
</script>
</head>
<body>
<p>1.jquery判断哪个option被选中，并且获取该值</p><input id="button1" type="button" value="http://www.mamicode.com/button1"/>
<select id="select1" name="select1">
<option id="0" value="http://www.mamicode.com/00"></option>
<option id="1" value="http://www.mamicode.com/11">1</option>
<option id="2" value="http://www.mamicode.com/22">2</option>
<option id="3" value="http://www.mamicode.com/33">3</option>
<option id="4" value="http://www.mamicode.com/44">4</option>
</select>
<hr/>
<p>2.jquery选中一个option</p><input id="button2" type="button" value="http://www.mamicode.com/增加"/>
<select id="select2" name="select2">
<option id="5" value="http://www.mamicode.com/55"></option>
<option id="6" value="http://www.mamicode.com/66">6</option>
<option id="7" value="http://www.mamicode.com/77">7</option>
<option id="8" value="http://www.mamicode.com/88">8</option>
<option id="9" value="http://www.mamicode.com/99">9</option>
</select>
<hr/>
<p>3.jquery增加一个option</p><input id="button3" type="button" value="http://www.mamicode.com/增加"/>
<select id="select3" name="select3">
<option id="10" value="http://www.mamicode.com/100"></option>
<option id="11" value="http://www.mamicode.com/111">11</option>
<option id="12" value="http://www.mamicode.com/122">12</option>
</select>
<hr/>
<p>4.移除option</p><input id="button4" type="button" value="http://www.mamicode.com/移除"/>
<select id="select4" name="select4">
<option id="13" value="http://www.mamicode.com/133">13</option>
<option id="14" value="http://www.mamicode.com/144">14</option>
</select>
<hr/>
<p>5.清空option</p><input id="button5" type="button" value="http://www.mamicode.com/清空"/>
<select id="select5" name="select5">
<option id="15" value="http://www.mamicode.com/155"></option>
<option id="16" value="http://www.mamicode.com/166">166</option>
<option id="17" value="http://www.mamicode.com/177">177</option>
<option id="18" value="http://www.mamicode.com/188">188</option>
<option id="19" value="http://www.mamicode.com/199">199</option>
</select>
<hr/>
</body>
</html>
jquery操作checkbox
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"> </script>
<title>获取对象宽度</title>
<script type="text/javascript">
//判断是否选中
$(function(){
$(‘#button1‘).bind(‘click‘,function(){
var isChecked=$(‘#Checkbox1‘).attr(‘checked‘);
alert(isChecked);
if(isChecked==‘checked‘){
alert(‘选中了‘);
}
else if(typeof(isChecked)==undefined){
alert(‘未选中‘);
}/*
else if(typeof(isChecked)==‘undefined‘){
alert(‘未选中‘);
}*/
});
});
</script>
<script type="text/javascript">
//选中
$(function(){
$(‘#button2‘).bind(‘click‘,function(){
$(‘#Checkbox2‘).attr(‘checked‘,true);
});
//取消
$(‘#button3‘).bind(‘click‘,function(){
$(‘#Checkbox2‘).attr(‘checked‘,false);
});
});
</script>
<script type="text/javascript">
$(function(){
$(‘#Checkbox2‘).bind(‘click‘,function(){
if($(this).attr(‘checked‘)==‘checked‘){
$("input[name=‘Checkboxone‘]").each(function(){
$(this).attr(‘checked‘,‘checked‘);
//$(this).attr(‘checked‘,true); 效果一样?
});
}
});
$(‘#Checkbox2‘).bind(‘click‘,function(){
if($(this).attr(‘checked‘)==undefined){
$("input[name=‘Checkboxone‘]").each(function(){
$(this).attr(‘checked‘,false);
});
}
});
});
</script>
<script type="text/javascript">
//获取值
$(function(){
$(‘#button4‘).bind(‘click‘,function(){
var value=http://www.mamicode.com/$(‘#Checkbox7‘).attr(‘value‘);
alert(value);
});
});
</script>
<script type="text/javascript">
//获取值用,分隔
$(function(){
$(‘#button5‘).bind(‘click‘,function(){
var str=‘‘;
var value=http://www.mamicode.com/$("input[name=‘Checkbox8‘]").each(function(){
if($(this).attr("checked")==‘checked‘){
str += $(this).attr(‘value‘)+‘,‘;
}
});
var index=str.lastIndexOf(‘,‘);
str=str.substring(0,index);
alert(str);
});
});
</script>
</head>
<body>
<p>1.jquery判断checkbox是否被选中</p><input id="button1" type="button" value="http://www.mamicode.com/button1"/>
<input type="Checkbox" id="Checkbox1" name="Checkbox1" value="http://www.mamicode.com/Checkbox1"/>Checkbox1
<p>注意:若选中，则打印出的是chenked,没选中则为undefined</p>
<hr/>
<p>2.jquery选中取消一个checkbox</p><input id="button2" type="button" value="http://www.mamicode.com/选中"/><input id="button3" type="button" value="http://www.mamicode.com/取消"/>
<input type="Checkbox" id="Checkbox2" name="Checkbox2" value="http://www.mamicode.com/Checkbox2"/>Checkbox2
<hr/>
<p>3.jquery全选/全取消</p>
<input type="Checkbox" id="Checkbox3" name="Checkboxall" value="http://www.mamicode.com/Checkbox3"/>全选
<input type="Checkbox" id="Checkbox4" name="Checkboxone" value="http://www.mamicode.com/Checkbox4"/>Checkbox4
<input type="Checkbox" id="Checkbox5" name="Checkboxone" value="http://www.mamicode.com/Checkbox5"/>Checkbox5
<input type="Checkbox" id="Checkbox6" name="Checkboxone" value="http://www.mamicode.com/Checkbox6"/>Checkbox6
<hr/>
<p>4.jquery获取checkbox的值</p><input id="button4" type="button" value="http://www.mamicode.com/获取"/>
<input type="Checkbox" id="Checkbox7" name="Checkbox7" value="http://www.mamicode.com/Checkbox7"/>Checkbox7
<hr/>
<p>5.jquery获取选中的checkbox的值组成字符串</p><input id="button5" type="button" value="http://www.mamicode.com/获取"/>
<input type="Checkbox" id="Checkbox8" name="Checkbox8" value="http://www.mamicode.com/Checkbox7"/>Checkbox8
<input type="Checkbox" id="Checkbox9" name="Checkbox8" value="http://www.mamicode.com/Checkbox8"/>Checkbox8
<input type="Checkbox" id="Checkbox10" name="Checkbox8" value="http://www.mamicode.com/Checkbox9"/>Checkbox8
<input type="Checkbox" id="Checkbox11"name="Checkbox8" value="http://www.mamicode.com/Checkbox10"/>Checkbox8
</body>
</html>
JQuery操作表单控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。