写一个springboot怎么在jquery获取到input的标签中的checkbox属性选中的价格的例子
时间: 2024-06-03 19:10:05 浏览: 13
您可以使用以下代码获取选中的复选框属性价格:
HTML代码:
<input type="checkbox" name="product" value="10"> Product A<br>
<input type="checkbox" name="product" value="20"> Product B<br>
<input type="checkbox" name="product" value="30"> Product C<br>
<button id="btn">Get Price</button>
<div id="output"></div>
JQuery代码:
$("#btn").on("click", function(){
var total_price = 0;
$("input[name='product']:checked").each(function(){
total_price += parseInt($(this).val());
});
$("#output").text("Total Price: " + total_price);
});
这段代码将会计算选中的复选框中 value 属性的总和,并在 #output 元素中显示总价。希望这个示例能够帮助您,有其他问题请随时问我哦!
相关问题
springboot前端页面th:each所以的标签,怎么在jquery获取到input的标签中的checkbox属性选中的价格
回答:您可以使用以下代码来获取被选中的checkbox的价格:
$("input[type='checkbox'][name='checkboxName']:checked").each(function () {
var price = $(this).attr("data-price");
// 进行相关操作
});
其中,"checkboxName"是你所要获取的checkbox标签的name属性,"data-price"是你所要获取的价格属性。
input标签的checkbox属性
input标签的checkbox属性是一种用于表单的HTML元素,它允许用户从一组选项中选择多个选项。当用户单击复选框时,它会在复选框的value属性中设置一个值,或者如果没有设置value属性,则使用默认值"on"。以下是一个简单的复选框示例:
```html
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子
```
在这个示例中,用户可以选择一个或多个水果,每个复选框都有相同的名称"fruit",但不同的值。当表单提交时,选中的复选框的值将作为"fruit"参数的值发送到服务器。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)