<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加option</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<div>
<input type="checkbox" id="myChk1" />
<input type="checkbox" id="myChk2" />
<input type="checkbox" id="myChk3" />
</div>
<form id="chkGrp">
<input name="check1" type="checkbox" />check1
<input name="check2" type="checkbox" />check2
<input name="check3" type="checkbox" />check3
</form>
<div>
<input type="checkbox" name="fruit"> apple
<input type="checkbox" name="fruit"> orange
<input type="checkbox" name="fruit"> banana
<input type="checkbox" name="fruit"> watermelon
<input type="button" value="I like these fruit!">
</div>
<script type="text/javascript">
// 获取选中个数
$(function(){
$("input[type='button']").click(function() {
alert($("input[type='checkbox']:checked").length);
});
})
// 检查是否全选
var all_checked = true;
$(":checkbox").each(function(){
if(this.checked == false){
all_checked = false;
break;
}
});
// 实现checkgroup单选方法一
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').prop('checked', false);
});
// 实现checkgroup单选方法二
$(document).ready(function(){
$('#chkGrp').find('input[type=checkbox]').bind('click', function(){
$('#chkGrp').find('input[type=checkbox]').not(this).attr("checked", false);
});
});
// 实现checkgroup单选方法三
function checkBox(obj) {
// 只有当选中的时候才会去掉其他已经勾选的checkbox，所以这里只判断选中的情况
if (obj.is(":checked")) {
$('input.mybox').prop('checked', false); // 先把所有的checkbox 都设置为不选种
obj.prop('checked',true);// 把自己设置为选中
}
}
/*
//jquery获取checkbox是否选中
if ($("#myChk")get(0).checked) { // do something}
if ($('#myChk').is(':checked')) { // do something}
if ($('#myChk').attr('checked')) { // do something}
var _check = $("#myChk")[0].checked;
var _check = $('#myChk').is(':checked');
var chks = $("input:checked"); //获取所有选中的checkbox,chks是一个元素数组
var len = chks.length; //选中的checkbox数量
*/
</script>
</body>
</html>
网友评论