如何将复选框中的选中值收集为 javascript 数组/字符串
How to collect checked values in checkboxes as a javascript array/string?
我想知道如何在mysql数据库中以复选框的形式搜索用户提供的输入。但在此之前,我需要将选中的字段放入 javascript 数组/字符串中,以便我可以使用 url 将其传递给 PHP。
<form>
<input type="checkbox" id="interests" name="interests" value="Food">`
<input type="checkbox" id="interests" name="interests" value="Movies">`
<input type="checkbox" id="interests" name="interests" value="Music">`
<input type="checkbox" id="interests" name="interests" value="Sports">`
</form>
我能够对其他表单元素(例如文本)进行上述操作并选择输入,但不确定如何为复选框执行此操作。请帮忙。谢谢
而不是
<form>
<input type="checkbox" id="interests" name="interests[]" value="Food">
<input type="checkbox" id="interests1" name="interests[]" value="Movies">
<input type="checkbox" id="interests2" name="interests[]" value="Music">
<input type="checkbox" id="interests3" name="interests[]" value="Sports">
将名称属性从interests
更改为interests[]
应该解决你的问题。如果我对属性有误,我很抱歉,有点不符合 PHP 的实践,但我很确定。无需对javascript做任何事情。这样更容易。当然,如果你不想要简单...
就您关于通过数据库搜索它的第一个问题而言,我不明白您为什么需要这样做?如果它是一个复选框,你确切地知道它应该是什么,所以只需让它像这样插入你的数据库:
INSERT INTO your_table values(user_id_i_guess, interests...);
你明白了吧?
代码中的问题
-
不要对多个元素使用相同的
id
-
将复选框的名称更改为
interests[]
jQuery
var vals = [];
$(':checkbox:checked[name^=interests]').val(function() {
vals.push(this.value);
});
如果要将数组转换为逗号分隔的字符串,请尝试
val.join(',');
注意
$(':checkbox:checked[name^=interests]')
选择器选中所有选中的复选框name
并以 interests
开头。
- 您必须为复选框使用不同的 id(元素的 id 必须是唯一的)
- 为复选框命名 interest[] 并提交表单 - 在服务器上您可以使用数组 $_POST['interest'] 或 $_GET['interest']
假设您的表单有一个名称,
var c = [],
els = document.forms.formName.elements,
len = els.length;
for ( var i = 0; i < length; i++ ) {
if ( els[ i ].type === 'checkbox' ) {
// If you want to add only checked checkboxes, you can use:
if ( els[ i ].checked ) c.push( els[ i ].value );
// If you don't care, just use:
c.push( els[ i ].value );
}
}
console.log( c ); // Array of the checkboxes values
如果您不关心旧版浏览器,您可以使用map
来获得更干净的代码:
var c = [].map.call( document.forms.formName.elements, function( el ) {
if ( el.type === 'checkbox' ) {
if ( el.checked ) return el.value;
}
} );
如果你有jQuery,这里有一些codez:
var c = $( ':checkbox:checked' ).map( function() {
return $( this ).val();
} );
console.log( c ); // Array of the checkboxes values
// To be more precise (so, more performant), you can use the following selector:
$( ':checkbox:checked', document.forms.formName.elements )
相关文章:
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 将Javascript数组发送到控制器ASP.NET MVC
- JavaScript数组包含一个值
- 将JavaScript数组传递给函数
- javascript:数组循环
- 将数据存储在javascript数组中以供进一步使用
- 在Javascript数组中查找绝对最大值
- JavaScript数组优化以提高性能
- 在javascript数组中分散数字
- 如何发送分配列表<字符串>到JavaScript数组或可枚举对象
- Javascript数组动态
- javascript数组元素是否知道其封闭数组
- 将 JSON 数组解析为 JavaScript 数组
- 将Transform和Instance Variable转换为对象的JavaScript数组
- 使用Web Html表单创建Javascript数组
- 从重复的javascript数组结果集中只获取一行
- 如何为Javascript数组()的使用准备PHP变量
- Javascript数组和函数
- 为DataTables aoColumnDefs创建JavaScript数组(JSON格式)