前端ABC通常使用多选框的时候，会伴有多选，反选，全选，删除这些功能。 这里写了一个完整的。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../test.css">
</head>
<body>
<div class="btn-group">
<button id="add" onclick="addRow()">添加行</button>
<button id="checkall" onclick="checkall()">全选</button>
<button id="checkinvert" onclick="inverse()">反选</button>
<button id="uncheckall" onclick="uncheckall()">全不选</button>
<button id="del" onclick="delcheck()">删除选中的</button>
<button id="sub" onclick="sub()">提交</button>
</div>
<table id="table" style="width:480px;">
<thead>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
</thead>
</table>
</body>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
</html>js
<script>
var count=0;
function addRow(){
$("#table").append('<tr><td><input type="checkbox" id="ch_'+count+ '" >'
+'</td><td > <input type="text" id="na_'+count+ '" ></td>'
+'<td ><input type="text" id="age_'+count+ '" ></td>'
+'<td > <input type="text" id="ge_'+count+ '" ></td>'
+'</tr>');
count++;
}
function checkall(){
var a=$("input[id^='ch_']:checkbox");
for(var i=0;i<a.length;i++){
a[i].checked=true;
}
}
function uncheckall(){
var a=$("input[id^='ch_']:checkbox");
for(var i=0;i<a.length;i++){
a[i].checked=false;
}
}
function delcheck(){
var d=$("input[id^='ch_']");
d.each(function(){
if($(this).is(":checked")){
$(this).parent().parent().remove();}
})
}
function sub(){
var objs=[];
$("input[id^=ch_]:checkbox").each(function(){
if($(this).is(":checked")){
var id=$(this).attr("id");
var str=id.substring(3,4);
var obj=new Object();
obj.na=$("#na_"+str).val();
obj.age=$('#ge_'+str).val();
obj.ge=$('#age_'+str).val();
objs.push(obj);
}
})
}
function inverse(){
var a=$("input[id^=ch_]:checkbox");
a.each(function(){
if($(this).is(":checked")){
$(this).prop("checked",false);
}
else{
$(this).prop("checked",true);
}}
);
}
</script>
jquery取radio单选按钮的值
$(“input[name=’items’]:checked”).val();
另：判断radio是否选中并取得选中的值
如下所示： function checkradio(){ var item = $(“checked”); var len=item.length; if(len>0){ alert(“yes–选中的值为：”+$(“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的项目为当前选中项
$(“11112222”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty()；//清空下拉框
然而：代码应该这样写：
取值：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 = $(“checked”); var len=item.length; if(len>0){ alert(“yes–选中的值为：”+$(“checked”).val()); } }
欢迎分享本文，转载请保留出处：前端ABC » radio，checkbox，select的常用功能