<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
<script src="jquery.min.js"></script>
</head>
<body>
<form action="">
你喜欢的动漫是<br>
<input type="checkbox" name="manga" value="火影">
<input type="checkbox" name="manga" value="海贼王">
<input type="checkbox" name="manga" value="死神">
<input type="checkbox" name="manga" value="妖精的尾巴">
<input type="checkbox" name="manga" value="虫师">
<input type="checkbox" name="manga" value="灌篮高手">
<input type="button" id="All" value="全选">
<input type="button" id="No" value="全不选">
<input type="button" id="Rev" value="反选">
<input type="button" id="send" value="提交">
</form>
<script>
var str = document.getElementsByName(‘manga[]‘);
$(‘#All‘).click(function(){
$(‘[name=manga]:checkbox‘).prop(‘checked‘, true);
})
$(‘#No‘).click(function(){
$(‘[name=manga]:checkbox‘).attr(‘checked‘, false);
})
$(‘#Rev‘).click(function(){
$(‘[name=manga]:checkbox‘).each(function(){
// $(this).attr(‘checked‘, !$(this).attr(‘checked‘));
this.checked = !this.checked;
})
})
$(‘#send‘).click(function(){
var str = ‘你选中的是: \r\n‘;
$(‘[name=manga]:checkbox:checked‘).each(function(){
str += $(this).val() + ‘\r\n‘;
})
alert(str);
})
</script>
</body>
</html>
时间： 2024-07-30 04:21:52