Form表单之复选框checkbox操作
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(); 移除复选的项;
