![](/img/trans.png)
[英]How to write sum of all input types values in span on change using javascript/jquery?
[英]How to write all input types values in span on change using javascript/jquery?
我有一个输入类型列表,是<input type="checkbox">
和<input type="text">
每当我选择一个复选框时,它将其值放入
<span name="products" id="products"></span>
以逗号分隔。
但是我不知道如何包含<input type="text" />
的值,所以每当我输入一个值时,它也会将其值添加到
<span name="products" id="products"></span>
请帮我。 我的代码:
使用Javascript
$(function() {
$('input[name=selectProducts]').on('change', function() {
$('#products').text($('input[name=selectProducts]:checked').map(function() {
return this.value;
}).get());
});
});
HTML
<input type="checkbox" name="selectProducts" id="product1" value="product1" />
<input type="checkbox" name="selectProducts" id="product2" value="product2" />
<input type="checkbox" name="selectProducts" id="product3" value="product3" />
<!-- i want to include these input type text -->
<input type="text" name="selectProducts" id="product4" value="product4" />
<input type="text" name="selectProducts" id="product5" value="product5" />
<span name="products" id="products"></span>
OUTPUT
product1,product2,product3,product4,product5
此处唯一可用的复选框。 请帮助我在输入文本中做。
您应该将type=text
输入添加到jquery选择器。
$('input[name=selectProducts]:checked, input[name=selectProducts][type=text]')
所以你的代码应该改为
$('input[name=selectProducts]').on('change', function() {
$('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() {
return this.value;
}).get());
});
$('input[name=selectProducts]').on('change keyup', function() { $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() { return this.value; }).get()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="selectProducts" id="product1" value="product1" /> <input type="checkbox" name="selectProducts" id="product2" value="product2" /> <input type="checkbox" name="selectProducts" id="product3" value="product3" /> <input type="text" name="selectProducts" id="product4" value="product4" /> <input type="text" name="selectProducts" id="product5" value="product5" /> <span name="products" id="products"></span>
试试这个代码
$(() => {
var prods = $("span#products");
$("input[type='text'], input[type='checkbox']").change((el) => {
if(!el.target.checked && el.target.type=="checkbox") return;
else{
prods.html(prods.html() + el.target.value);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.