如何用html做复选框全选中和全不选中

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用html做复选框全选中和全不选中相关的知识，希望对你有一定的参考价值。

1.这个要使用js来判断是否选中,需要引用jquery

<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(function()
 $("#all").change(function()//判断全选框的改变
  var flage =$(this).is(":checked");//全选选中为true，否则为false
  $("input[type=checkbox]").each(function()
  $(this).prop("checked",flage);
  )
 )
)
</script>
<input type="checkbox" id="all" />全选
<input type="checkbox" />
<input type="checkbox" />
 <input type="checkbox" />


 参考技术A <table>
<tr>
<td><input type="checkbox" id="all" onclick="checkAll()"></td>
<td>ID</td>
</tr>
<tr>
<td><input type="checkbox" name="checkname[]"></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkname[]"></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkname[]"></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="checkname[]"></td>
<td>4</td>
</tr>
</table>
<script type="text/javascript">
function checkAll()
var all=document.getElementById('all');
var one=document.getElementsByName('checkname[]');
for(var i=0;i<one.length;i++)
one[i].checked=all.checked;


</script>

jquery实现复选框全选，全不选，反选中的问题

今天试了一下用jquery选择复选框，本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法。

html代码如下（这里没有用任何样式，就没有再放css了）：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="test_ch5.css" >
        <title>test_ch5</title>
    </head>
    <body>
        <div id="wrapper">
            <form action="" method="post">
                    <p>你最爱好的运动是？</p>
                    <input type="checkbox" name="items" >足球
                    <input type="checkbox" name="items">篮球
                    <input type="checkbox" name="items">羽毛球
                    <input type="checkbox" name="items">乒乓球<br>
                    <input type="button" id="all" value="全 选">
                    <input type="button" id="no" value="全不选">
                    <input type="button" id="reverse" value="反 选">
                    <input type="button" id="send" value="提 交">
                </form>    
        </div>
    </body>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function(){
        $("#all").click(function(){
            $(‘[name=items]:checkbox‘).prop(‘checked‘,true);
        });
        $("#no").click(function() {
            $(‘[type=checkbox]:checkbox‘).prop(‘checked‘,false);
        });
        $("#reverse").click(function() {
            $(‘input[name=items]‘).each(function(){
                $(this).prop(‘checked‘,!$(this).prop(‘checked‘));
            });
        });

 })
</script>
</html>

界面如下：技术分享

之前不知道有prop，使用prop的地方全部用的是attr，发现实现不了想要的功能啊，然后才发现的prop，它是是jquery1.6以后出来的，用来区别之前的.attr()方法.
区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

 








以上是关于如何用html做复选框全选中和全不选中的主要内容，如果未能解决你的问题，请参考以下文章

js中复选框怎么做全选 但是不全部选中

使用JavaScript完成复选框的全选和全不选

如何用jQuery实现checkbox全选

jQuery学习——使用JQ完成复选框的全选和全不选

html 多选框 如何用js 控制全选 并且一键复制选中的多项值到剪贴板

JQuery的复选框选中取消全选，全不选问题