Home > Article > Web Front-end > jQuery determines whether the checkbox is selected and selects all and inverts the selection implementation code

jQuery determines whether the checkbox is selected and selects all and inverts the selection implementation code

高洛峰Original: 2017-02-06 13:20:211181browse

jQuery determines whether the checkbox (checkbox) is selected:
if($("#id").attr("checked")==true)

jQuery implements checkbox (checkbox) Box) selected, all-selected/inverse-selected code:

<!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-Type" content="text/html; charset=utf-8" />
<title>jQuery如何判断checkbox（复选框）是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name=&#39;checkbox&#39;]").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name=&#39;checkbox&#39;]").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 });

 $("#btn1").click(function(){
  $("[name=&#39;checkbox&#39;]").attr("checked",&#39;true&#39;);//全选
 });

 $("#btn2").click(function(){
  $("[name=&#39;checkbox&#39;]").removeAttr("checked");//取消全选
 });

 $("#btn3").click(function(){
  $("[name=&#39;checkbox&#39;]:even").attr("checked",&#39;true&#39;);//选中所有奇数
 });

 $("#btn4").click(function(){
  $("[name=&#39;checkbox&#39;]").each(function(){
   if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }else{
    $(this).attr("checked",&#39;true&#39;);
   }
  });
 });

 $("#btn5").click(function(){
  var str="";
  //$("input:checkbox[name=&#39;checkbox&#39;]:checked").each(function(){//可以
  $("[name=&#39;checkbox&#39;][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});
//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <input type="button" id="btn1" value="全选">
        <input type="button" id="btn2" value="取消全选">
        <input type="button" id="btn3" value="选中所有奇数">
        <input type="button" id="btn4" value="反选">
        <input type="button" id="btn5" value="获得选中的所有值">
        <br />
        <input type="checkbox" name="checkbox" value="checkbox1">checkbox1
        <input type="checkbox" name="checkbox" value="checkbox2">checkbox2
        <input type="checkbox" name="checkbox" value="checkbox3">checkbox3
        <input type="checkbox" name="checkbox" value="checkbox4">checkbox4
        <input type="checkbox" name="checkbox" value="checkbox5">checkbox5
        <input type="checkbox" name="checkbox" value="checkbox6">checkbox6
        <input type="checkbox" name="checkbox" value="checkbox7">checkbox7
        <input type="checkbox" name="checkbox" value="checkbox8">checkbox8
    </form>
</body>
</html>

For more jQuery judgment of checkbox (checkbox) whether it is selected and all-selected, inverse-selected implementation code related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements all check box selection/unselect all/inverse selection and obtains the selected valueNext article：jQuery implements all check box selection/unselect all/inverse selection and obtains the selected value

See more

jQuery determines whether the checkbox is selected and selects all and inverts the selection implementation code

Related articles