Detailed explanation of jQuery implementation of traversing checkbox examples-JS Tutorial-php.cn

Detailed explanation of jQuery implementation of traversing checkbox examples

小云云

Release： 2018-01-23 13:36:46

Original

2339 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!