实现input框的全选和清空

 <html><head><title>Mr企鹅先森</title>   </head><body><label><input id="sel_1" onchange="selectAll()" type="checkbox" value="1" />全选/全不选</label><input type="checkbox" value="2"/><input type="checkbox" value="3"/><input type="checkbox" value="4"/><input type="checkbox" value="5"/> </body> <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script><script type="text/javascript">  function selectAll(){var isCheck=$("#sel_1").is(':checked');  //获得全选复选框是否选中$("input[type='checkbox']").each(function() {  this.checked = isCheck;       //循环赋值给每个复选框是否选中});}</script></body>      </html>

这里主要是实现一个input框的全选和清空，首先我们定义5个input单选按钮，第一个按钮，来控制全选和反选,剩下下个按钮可以单选。

我们在第一个input框上面绑定一个onchange事件selectAll，每当他变化的时候，我们判断一下他的状态，如果选中呢？我们就给剩下四个input框加上checked = true的选项，如果没有选中我们就给剩下四个input框加上checked = false的选项。

实现input框的全选和清空相关推荐

好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
下拉选框如需样例和具体效果,请点击下面的连接. 好用的下拉选框(单选,多选,全选,清空和反选,及个种样式) 附件一:layui应用formselect layui.config({base: './ ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
复选框的全选、全不选、和获取选中的值；
1.获取select下面的选中的option值 <select id="afterSaleReson" name="afterSaleReson"> ...
HTML复选框的全选、全不选以及单选操作。
今天在进行HTML的table练习的时候,发现一个比较有趣的知识点,有关于复选框的全选.全不选,以及单选操作的相关问题. 待我上网搜索了一下相关资料,发现有关于全选以及全不选的详解还是挺多的,但是复选 ...
复选框的全选和取消全选
复选框的全选和取消全选 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
JavaScript - 复选框的全选和取消
复选框的全选和取消 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...
php全选和反选,纯javascript实现选择框的全选与反选功能
HTML部分选择全部一键上路 js部分 var oinput = document.getElementById('all'); // var oinput_s = document.getEle ...

实现input框的全选和清空

实现input框的全选和清空相关推荐

最新文章

热门文章