选择器,遍历,数组
- jQuery的选择器中
’ :checkbox’
是查找所有复选框。
$("#fruit :checkbox");
遍历这个对象数组
jQeury的each函数:为每个匹配元素规定运行的函数。
each函数::
$(selector).each(function(index,element))
// 1.参数name的描述:
// 选中复选框的为true, 没选中为false
// 选中:
$("input[type='checkbox']").prop("checked",true);
// 没选中:
$("input[type='checkbox']").prop("checked",false);
// 2.参数perporties描述:
// 禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled:true});
// 3.参数key,回调函数描述:
// 通过函数来设置所有页面上的复选框反选。
$("input[type='checkbox']").prop("checked",fucntion(i, val){
return !val;
});
// 获取选中复选框的值
$(".btn").click(function(){
var arr = new Array();
$("#fruit :checkbox[checked]").each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(",");
console.log(vals);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<title></title>
</head>
<body>
<input type="radio" name="type" value="0"/>类型0
<input type="radio" name="type" value="1"/>类型1
<input type="radio" name="type" value="2"/>类型2
<input type="radio" name="type" value="3"/>类型3
<br />
<input type="button" value="获取单选框的值" onclick="getRadio()"/>
<input type="button" value="为单选框赋值" onclick="setRadio()"/>
<br />
<input type="checkbox" name="status" value="0"/>状态0
<input type="checkbox" name="status" value="1"/>状态1
<input type="checkbox" name="status" value="2"/>状态2
<input type="checkbox" name="status" value="3"/>状态3
<br />
<input type="button" value="获取多选框的值" onclick="getCheckbox()"/>
<input type="button" value="为复选框赋值" onclick="setCheckbox()" />
</body>
<script>
function getRadio(){
var radioValue = $("input[name='type']:checked").val();
console.log(radioValue);
}
function setRadio(){
var i = 2;
//$("input[name='type']").prop("checked",false);
$("input[name='type'][value='"+i+"']").prop("checked",true);
}
function getCheckbox(){
var checkboxValue = [];
$("input[name='status']:checked").each(function(){
checkboxValue.push($(this).val());
});
console.log(checkboxValue);
}
function setCheckbox(){
var checkboxArray = [1,3];
$("input[name='status']").prop("checked",false);
$.each(checkboxArray,function(index,value){
$("input[name='status'][value='"+value+"']").prop("checked",true);
});
}
</script>
</html>
- 获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
// 或者
$("input:[type='checkbox']:checked").val();
// 或者
$("input:[name='ck']:checked").val();
- 获取多个checkbox选中项
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
- 设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
// <!-- 或者 -->
$('input:checkbox').eq(0).attr("checked",'true');
- 设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
// 或者
$('input:radio:last').attr('checked', 'true');
- 根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
// 或者
$('input:radio').slice(1,2).attr('checked', 'true');
- 选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
- 根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
- 删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
- 删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
// 如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
- 遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
- 全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
- 全部取消选择
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});
jquery判断checked的三种方法
.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦
// jquery赋值checked的几种写法:
// 所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
// jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
$("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");