Home > Article > Web Front-end > How does jquery determine whether a checkbox is selected? (Source code)

How does jquery determine whether a checkbox is selected? (Source code)

云罗郡主forward: 2018-10-29 14:24:405886browse

How does jquery determine checkbox? I believe that many friends who have just come into contact with jquery will have such questions. This chapter will introduce to you how jquery determines whether a checkbox is selected. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Everyone knows that in html, if a checkbox is checked, it is checked="checked". But if we use jquery alert($("#id").attr("checked")), it will prompt you that it is true instead of checked. Therefore, many friends judge that if($("#id").attr("checked")=="true") is wrong. In fact, it should be if($("#id").attr("checked") ==true).

The example includes the following functions:

<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="获得选中的所有值">

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE> New Document </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").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>

The above is a complete introduction to how jquery determines whether a checkbox is selected. If you want to know more about JavaScript video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How does jquery determine whether a checkbox is selected? (Source code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:lvyestudy.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Introduction to the use of modularity in ES6 (code example)Next article：Introduction to the use of modularity in ES6 (code example)

See more

How does jquery determine whether a checkbox is selected? (Source code)

Related articles