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:462255browse
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='ckb']").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!