javascript - 如何使用 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>
输出
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>
推荐阅读
- angular - 使用 param observable 时会出现不同的输出
- php - 如何使用 PHP 将 PDF 流解码为可下载文件?
- google-cloud-platform - 使用 Google Cloud DLP API 处理表太慢
- android - 如何在jenkins上启动模拟器并通过appium运行测试脚本
- javascript - 脚本不会重新加载加载的 php
- eggplant - 茄子不启动
- php - 生成固定的随机数组 - PHP
- cordova - 如何在人行横道科尔多瓦上进行地理定位
- angular - 获取子集合firestore用户登录
- c# - Unity C# 代码奇怪的行为