Home > Article > Web Front-end > Detailed explanation of jQuery implementation of traversing checkbox examples

Detailed explanation of jQuery implementation of traversing checkbox examples

小云云Original: 2018-01-23 13:36:462315browse

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>

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!

php jquery 字符串

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 Get h1-h6 title element value method exampleNext article：jQuery Get h1-h6 title element value method example

See more

Detailed explanation of jQuery implementation of traversing checkbox examples

Related articles