Home >Web Front-end >JS Tutorial >Detailed explanation of jQuery method examples for operating CheckBox

Detailed explanation of jQuery method examples for operating CheckBox

黄舟Original: 2017-12-04 10:48:371721browse

In our actual development process, whether it is html or jQuery, it is one of the knowledge we must learn. I believe everyone is familiar with CheckBox and will use it in jQuery in html. So today we will take you to a detailed introduction to the method examples of jQuery operating CheckBox!

jQuery's method example of operating CheckBox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     
<HTML>     
 <HEAD>     
  <TITLE> New document．nbsp;</TITLE>     
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
    <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>     
  <SCRIPT LANGUAGE="javascript">     
  <!--     
   $("document．quot;).ready(function(){     
         
    $("#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="";     
    $("[name=&#39;checkbox&#39;][checked]").each(function(){     
     str+=$(this).val()+""r"n";     
   //alert($(this).val());     
    })     
   alert(str);     
    })     
   })     
  //-->     
  </SCRIPT>     
       
 </HEAD>     
    
 <BODY>     
 <form name="form1" method="post" action="">     
   <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>

Summary:

This article introduces you to the example of jQuery's method of operating CheckBox through examples. Details My partners also have a certain understanding of this, and I hope it will be helpful to your work!

Related recommendations:

jquery one-click method to control checkbox selection, inverse selection, and deselection all

How to get multiple values selected in checkbox in js

checkbox implements click event Trigger span element content change

The above is the detailed content of Detailed explanation of jQuery method examples for operating CheckBox. For more information, please follow other related articles on 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 a search box similar to BaiduNext article：jquery implements a search box similar to Baidu

See more

Detailed explanation of jQuery method examples for operating CheckBox

Related articles