input type checkbox(input checked属性)
各位老铁们好，相信很多人对input type checkbox都不是特别的了解，因此呢，今天就来为大家分享下关于input type checkbox以及input checked属性的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
js实现checkbox全选、不选与反选的方法
本文实例讲述了js实现checkbox全选、不选与反选的方法。分享给大家供大家参考。具体分析如下：
一、思路：
1.
获取元素
2.
给全选
不选
反选添加点击事件
3.
用for循环checkbox
4.
把checkbox的checked设置为true即实现全选
5.
把checkbox的checked设置为false即实现不选
6.
通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。
二、html代码：
<input
type="button"
value="全选"
id="sele"/>
<input
type="button"
value="不选"
id="setinterval"/>
<input
type="button"
value="反选"
id="clear"/>
<div
id="checkboxs">
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
</div>
三、js代码：
<script>
window.onload=function(){
var
sele=document.getElementById('sele');//获取全选
var
unsele=document.getElementById('setinterval');//获取不选
var
clear=document.getElementById('clear');//获取反选
var
checkbox=document.getElementById('checkboxs');//获取div
var
checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}
//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}
}
</script>
希望本文所述对大家的javascript程序设计有所帮助。
jquery,ajax 如何提交多个checkbox的值
<input type="checkbox" name="student" value="1" data-age="18"/>
<input type="checkbox" name="student" value="2" data-age="19"/>
<input type="checkbox" name="student" value="3" data-age="20"/>
var student=$("input[name='student']:checked").serialize();
$.ajax({
url:"your-url",
type:"post",
data: student,
success: function(result){
//handle
}
});
如果3个都是选中的状态的话，后台接收的数据为1,2,3
扩展资料：关于jQuery对checkbox的其他操作
1、根据id获取checkbox
$("#cbCheckbox1");
2、获取所有的checkbox
$("input[type='checkbox']");//or
$("input[name='cb']");
3、获取所有选中的checkbox
$("input:checkbox:checked");//or
$("input:[type='checkbox']:checked");//or
$("input[type='checkbox']:checked");//or
$("input:[name='ck']:checked");
4、获取checkbox值
//用.val()即可，比如：
$("#cbCheckbox1").val();
5、获取多个选中的checkbox值
var vals= [];
$('input:checkbox:checked').each(function(index, item){
vals.push($(this).val());
});
6、判断checkbox是否选中（jquery 1.6以前版本用$(this).attr("checked")）
$("#cbCheckbox1").click(function(){
if($(this).prop("checked")){
alert("选中");
} else{
alert("没有选中");
}
});
7、设置checkbox为选中状态
$('input:checkbox').attr("checked",'checked');//or
$('input:checkbox').attr("checked", true);
8、设置checkbox为不选中状态
$('input:checkbox').attr("checked",'');//or
$('input:checkbox').attr("checked", false);
9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").attr("disabled","disabled");//or
$("input[type='checkbox']").attr("disabled", true);//or
$("input[type='checkbox']").prop("disabled", true);//or
$("input[type='checkbox']").prop("disabled","disabled");
10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$("input[type='checkbox']").removeAttr("disabled");//or
$("input[type='checkbox']").attr("disabled", false);//or
$("input[type='checkbox']").prop("disabled","");//or
$("input[type='checkbox']").prop("disabled", false);
求javascript checkbox 选中事件代码
首先通过getElementById或其它方式获得这些对象obj，然后判断obj.checked= true或false就可以了。
例:
<input id='bigclassauthorize' type='checkbox' onclick='testClickBigCheckBox()'/>
<input id='smallclassauthorize1' type='checkbox'/>
<input id='smallclassauthorize2' type='checkbox'/>
....
function testClickBigCheckBox(){
var big= document.getElementById('bigclassauthorize');
var small1= document.getElementById('smallclassauthorize1');
var small2= document.getElementById('smallclassauthorize2');
if(big.checked== true){
small1.checked= true;
small2.checked= true;
}else{
small1.checked= false;
small2.checked= false;
}
}
代码可以精简或者封装,这里只是简单的描述一下基本做法，以上是大项被选中的事件处理，小项的原理差不多。
扩展资料：思路：获取checkbox对象，根据value属性设置checkbox的checked属性（true为选中，false为取消选中）。下面实例演示——根据文本框的制定值设置复选框的选中项：
1、HTML结构
<input name="test" type="checkbox" value="1"/>item-1
<input name="test" type="checkbox" value="2"/>item-2
<input name="test" type="checkbox" value="3"/>item-3<br>
<input name="test" type="checkbox" value="4"/>item-4
<input name="test" type="checkbox" value="5"/>item-5<br>
<input type="text" id="val"><input type="button" value="确定" onclick="fun()">
2、javascript代码
function fun(){
var val= document.getElementById("val").value.split(",");
var boxes= document.getElementsByName("test");
for(i=0;i<boxes.length;i++){
for(j=0;j<val.length;j++){
if(boxes[i].value== val[j]){
boxes[i].checked= true;
break
}
}
}
}
input type checkbox的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于input checked属性、input type checkbox的信息别忘了在本站进行查找哦。