Home > Web Front-end > JS Tutorial > body text

Detailed explanation of jQuery implementation of traversing checkbox examples

小云云
Release: 2018-01-23 13:36:46
Original
2314 people have browsed it

This article mainly introduces jQuery's method of implementing check box traversal, and analyzes jQuery's techniques for traversing and string operations of form check box elements based on examples. Friends who need it can refer to it. I hope it can help everyone.

1. Problem background:

There are 10 check boxes here. Get their values ​​based on the selected check boxes, connect their values ​​with "——", and insert them into p

2. Implementation code:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>遍历复选框</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script>
      $(document).ready(function(){
        $("#btn").click(function(){
          var str = "";
          $("input[name=&#39;ckb&#39;]").each(function(){
            if($(this).is(":checked"))
            {
              str += "——" + $(this).val();
            }
          });
          $("#txt").html(str);
        });
      });
    </script>
  </head>
  <body>
    <p>
      <input type="checkbox" name="ckb" value="1" />1
      <input type="checkbox" name="ckb" value="2" />2
      <input type="checkbox" name="ckb" value="3" />3
      <input type="checkbox" name="ckb" value="4" />4
      <input type="checkbox" name="ckb" value="5" />5
      <input type="checkbox" name="ckb" value="6" />6
      <input type="checkbox" name="ckb" value="7" />7
      <input type="checkbox" name="ckb" value="8" />8
      <input type="checkbox" name="ckb" value="9" />9
      <input type="checkbox" name="ckb" value="10" />10<br>
      <input type="button" id="btn" value="遍历"/>
      <p id="txt"></p>
    </p>
  </body>
</html>
Copy after login

3. Operation rendering:

Related recommendations :

JQuery finds sub-element find() and traverses the collection each method example sharing

PHP implements pre-order, mid-order and post-order traversal binary tree operations Example

jQuery node traversal method summary


The above is the detailed content of Detailed explanation of jQuery implementation of traversing checkbox examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template