全选全不选反选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js">

</script>
</head>
<body>
<div>
兴趣爱好: <br> <br> <input type="checkbox" name="fav"
value="look" checked="checked"> 看书 <input type="checkbox"
name="fav" value="write"> 写字 <input type="checkbox"
name="fav" value="drow"> 画画 <input type="checkbox" name="fav"
value="dubao"> 读报 <input type="checkbox" name="fav"
value="TV"> 看电视
</div>

<div>
<input type="radio" name="hx" id="qx" value="1" > 全选
<input type="radio" name="hx" id="fx" value="2" > 反选
<input type="radio" name="hx" id="qbx" value="0"> 全不选
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var input=document.getElementsByName("fav");
var qx=document.getElementById("qx");
var fx=document.getElementById("fx");
var qbx=document.getElementById("qbx");
qx.onclick=function(){
for(var i=0;i<input.length;i++){
input[i].checked=true;
}
}
qbx.onclick=function(){
for(var i=0;i<input.length;i++){
input[i].checked=false;
}
}
fx.onclick=function(){
for(var i=0;i<input.length;i++){
input[i].checked=!input[i].checked;
}
}
}
</script>
</html>

时间: 2024-10-11 10:00:55

全选全不选反选的相关文章

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时,我们可以用checked的属性 选中了就返回true,没被选中就返回false; 这是html代码: <form action="#"> <label for="hobby">爱好:</label> <label for="hobby1"> <input type="checkbox" name="hobby" id=

jquery实现全选、不选、反选的两种方法

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr().   方法一

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

【JS】全选、不选、反选复选框(模板)

今天和大家分享一个全选.不选.反选复选框的例子,这个例子可以当做是一个模板使用,只要把一些数据适当改变以下就OK啦. 这是效果图: 代码如下: HTML部分: <input type="button" value="全选"/ id="btn1"> <input type="button" value="不选"/ id="btn2"> <input type=

Jq 遍历 全选 全不选 反选

//全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked'); var fruit = $('input[name="check"]'); bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false); }); //反选 遍历checkbox 如果当前为选中 就设置为

(checkbox)全选/全不选/反选/选中显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

checkbox全选/全不选/反选(jQuery v1.11.3测试通过)

主要功能: 方式一:使用三个按钮(全选.全不选 .反选)控制checkbox的选择.(实际可能全选/全不选共用按钮,这里没做) 方式二:使用一个主控checkbox用于控制其他checkbox的选择状态,同时受控checkbox是否全选也反馈给主控checkbox(这里有两种方式实现).   以下代码及实现效果在jQuery v1.11.3测试通过!2015/07/18! 测试效果:   代码: <!-- ---------------------------------------------

用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了

首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="selectAll"value="全选"/>全选<br> <input type="checkbox" name="hobby"value="足球"/>足球 <input type=&qu

全选/全不选案例

<html> <head> <title>Html示例</title> <style type="text/css"> </style> </head> <body> <input type="checkbox" id="boxid" onclick="selectAllNo()"/>全选/全不选 <br/>

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<