Form表单之复选框checkbox操作
来源:互联网 发布:mac mnmp 一键安装包 编辑:程序博客网 时间:2024/06/05 17:00
input复选(checkbox):
<label>input复选1组:</label><input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1<input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3
相同name的单选项为同一组复选,checked="checked"选中某复选项;
1.checkbox选中项的值和索引(实际应该叫序号,index()的值从1开始,不是0)
<label>input复选2组:</label><input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2<input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3
$("input[name='checkbox2']:checked").val();//选中项的第一个值
$("input[name='checkbox2']:checked").each(function(){
alert("checkbox2组选中项的值:"+$(this).val());//遍历选中项的值
});
var index1 = $("input[name='checkbox2']:checked").index();//选中项的第一个序号
alert("checkbox2组选中项的项:"+index1);
$("input[name='checkbox2']:checked").each(function(){//遍历选中项的序号
alert("checkbox2组选中项的项:"+$(this).index());//遍历选中项的索引
});
2.checkbox值对应的索引和索引对应的值
<label>input复选3组:</label><input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3
checkbox索引对应的值:$("input[name='checkbox3']").eq(2).val();//checkbox复选3;eq(索引值),索引从0开始;
checkbox值对应的索引:$("input[name='checkbox3'][value=checkbox复选2]").index();//2;index(序号),序号从1开始
$("input[name='checkbox3']:first").val();//checkbox第一项的值
$("input[name='checkbox3']:first").index();//checkbox第一项的索引
$("input[name='checkbox3']:last").val();//checkbox最后一项的值
$("input[name='checkbox3']:last").index();//checkbox最后一项的索引
3.checkbox选中和取消选中:
<label>input复选4组:</label><input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3
$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项
$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项
$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项
$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项
$("input[name='checkbox4']").eq(1).prop("checked",true);//选中某索引对应的项
$("input[name='checkbox4']").eq(1).prop("checked",false);//取消选中某索引对应的项
$("input[name='checkbox4']").eq(2).prop("checked","checked");//选中某索引对应的项
$("input[name='checkbox4']").eq(2).removeProp("checked");//取消选中某索引对应的项
4.checkbox删除项:
<label>input复选5组:</label><input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3$("input[name='checkbox5']").eq(1).remove();或者
$("input[name='checkbox5'][value=checkbox复选2]").remove(); 移除复选的项;
参考自:http://www.jb51.net/article/77946.htm
html内容:
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"/> <title>Form表单复选操作示例1</title> <style> body{font-size:14px;} label{display:inline-block;width:8em;margin-left:0.3em;margin-right:0.3em;}input{margin-top:0.3em;margin-bottom:0.3em;}.tipmsg{font-size:14px;color:#f00;} </style></head><body><form> <h2>input复选(checkbox):</h3> <div> <label>input复选1组:</label> <input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1<input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3<span class="tipmsg">相同name的单选项为同一组复选,checked="checked"选中某复选项;</span> </div> <h3>checkbox选中项的值和索引(实际应该叫序号,index()的值从1开始,不是0)</h3><hr> <div> <label>input复选2组:</label> <input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2<input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3<span class="tipmsg"><br>$("input[name='checkbox2']:checked").val();//只返回选中项的第一个值<br>each遍历获取多个选中项的值;<br>$("input[name='checkbox2']:checked").val();//只返回选中项的第一个序号<br>each遍历获取多个选中项的序号;<br></span> </div> <h3>checkbox值对应的索引和索引对应的值</h3><hr> <div> <label>input复选3组:</label> <input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3<span class="tipmsg"><br>$("input[name='checkbox3']").eq(2).val();//checkbox复选3;eq(索引值),索引从0开始<br>$("input[name='checkbox3'][value=checkbox复选2]").index();//2;index(序号),序号从1开始<br>$("input[name='checkbox3']:first").val();//checkbox第一项的值<br>$("input[name='checkbox3']:first").index();//checkbox第一项的索引<br>$("input[name='checkbox3']:last").val();//checkbox最后一项的值<br>$("input[name='checkbox3']:last").index();//checkbox最后一项的索引</span> </div> <h3>checkbox选中和取消选中</h3><hr> <div> <label>input复选4组:</label> <input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3<span class="tipmsg"><br>$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项<br>$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项<br>$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项<br>$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项<br>$("input[name='checkbox4']").eq(1).prop("checked",true);//选中某索引对应的项<br>$("input[name='checkbox4']").eq(1).prop("checked",false);//取消选中某索引对应的项<br>$("input[name='checkbox4']").eq(2).prop("checked","checked");//选中某索引对应的项<br>$("input[name='checkbox4']").eq(2).removeProp("checked");//取消选中某索引对应的项</span> </div> <h3>checkbox删除项</h3><hr> <div> <label>input复选5组:</label> <input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1<input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2<input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3<span class="tipmsg"><br></span> </div></form><script src="./jquery-1.x.min.js"></script><script>$(function(){ var val1 = $("input[name='checkbox2']:checked").val();//获取单个复选项的值;如果有多项选中,只返回所有选中项索引最小的值; //alert(val1); $("input[name='checkbox2']:checked").each(function(){//alert("checkbox2组选中项的值:"+$(this).val());//遍历选中项的值 }); var index1 = $("input[name='checkbox2']:checked").index(); //alert("checkbox2组选中项的项:"+index1); $("input[name='checkbox2']:checked").each(function(){//alert("checkbox2组选中项的项:"+$(this).index());//遍历选中项的索引 }); var val2 = $("input[name='checkbox3']").eq(2).val(); //alert("checkbox3索引2对应的值为:"+val2);//checkbox复选3(eq(索引值)索引值从0开始) var index2 = $("input[name='checkbox3'][value=checkbox复选2]").index(); //alert("checkbox3值checkbox复选2对应的项为:"+index2); var var3 = $("input[name='checkbox3']:first").val();//checkbox第一项的值 //alert(var3); var index3 = $("input[name='checkbox3']:first").index();//checkbox第一项的索引 //alert(var3); //alert(index3); var var4 = $("input[name='checkbox3']:last").val();//checkbox最后一项的值 //alert(var4); var index4 = $("input[name='checkbox3']:last").index();//checkbox最后一项的索引 //alert(index4); //$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项 //$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项 //$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项 //$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项 $("input[name='checkbox4']").eq(1).prop("checked",true);//选中某索引对应的项 $("input[name='checkbox4']").eq(1).prop("checked",false);//取消选中某索引对应的项 $("input[name='checkbox4']").eq(2).prop("checked","checked");//选中某索引对应的项 $("input[name='checkbox4']").eq(2).removeProp("checked");//取消选中某索引对应的项 //$("input[name='checkbox5']").eq(1).remove(); $("input[name='checkbox5'][value=checkbox复选2]").remove();});</script></body></html>
- Form表单之复选框checkbox操作
- JQuery之复选框checkbox基本操作
- 表单操作-复选框
- jquery操作复选框checkbox
- JQuery checkbox复选框操作
- JavaScript操作checkbox复选框
- jquery操作复选框(checkbox)
- jquery操作复选框(checkbox)
- 操作checkbox复选框问题
- jquery操作复选框checkbox
- jquery操作复选框checkbox
- Jquery操作checkbox复选框
- 敏捷思维学习Ext.Net MVC--3.5Form表单组件之复选组件(checkbox)暨母版页
- PHP处理Checkbox复选框表单提交
- PHP处理Checkbox复选框表单提交
- 表单提交复选框(checkbox)注意事项
- 表单提交复选框(checkbox)注意事项
- jsp复选框checkbox----表单处理
- http参数中特殊字符处理
- java实现web端文件上传与下载
- realsense R200转成costmap_2d
- html中<#include "/headPage.html">的用法
- 按天分割apache日志
- Form表单之复选框checkbox操作
- 单例模式介绍
- 北京天宇联科技有限责任公司—智慧园区
- 欢迎使用CSDN-markdown编辑器
- visual studio C# 上使用'mysql_native_password'无法获取本地mysql使用权
- (NodeJS+unit.js+MochaJS+istanbul)简单操作实例
- C/C++ 面试常见题目
- shiro 使用说明
- 用vs2008编写和调试linux程序 ----VisualGDB 使用教程