将所有选中的复选框 ID 放入一个字符串中

Putting all checked checkbox id's into an string

本文关键字：字符串 一个 ID 复选框      更新时间：2023-09-26

我有一个带有不同 id 的复选框列表，我想将它们全部放入这样的数组中：

var my_string = "champion='id1' OR champion='id2' OR champion='

id3' OR champion='id4'"

你可以说我有一个这样的html：

<ul>
    <li><input type="checkbox" id="id1"/></li>
    <li><input type="checkbox" id="id2"/></li>
    <li><input type="checkbox" id="id3"/></li>
    <li><input type="checkbox" id="id4"/></li>
</ul>

我该如何使用jquery/javascript来做到这一点？

以下内容适用于您的特定示例。 它查询所有input元素，使用"champion=id"构建一个数组，然后用单词"OR"连接数组。

var checks= document.querySelectorAll('input');
var s = [];
for(var i = 0 ; i < checks.length ; i++) {
  s.push("champion='"+checks[i].id+"'");
}
var my_string = s.join(' OR ');
alert(my_string);
<ul>
    <li><input type="checkbox" id="id1"/></li>
    <li><input type="checkbox" id="id2"/></li>
    <li><input type="checkbox" id="id3"/></li>
    <li><input type="checkbox" id="id4"/></li>
</ul>

这会将页面上复选框的所有输入的 id 获取到包含 id 值的数组中。

$(function() {
    var arr = new Array();
    $("input[type='checkbox']").each(function(i, v) {
        arr.push($(v).attr("id"));
    });
})

要获取所有复选框，您可以使用相应的 CSS 选择器：

var checkedBoxes = document.querySelectorAll( 'input[type="checkbox"]:checked' );
console.log( checkedBoxes );

此时，您有一个 DOM NodeList，您可以直接迭代它或将条目传输到数组中。

// print all ID's
for( var i = checkedBoxes.length; i--; ) {
    console.log( checkedBoxes[i].id );
}
// store ID's into flat array
var idList = [];
for( var i = checkedBoxes.length; i--; ) {
    idList.push( checkedBoxes[i].id );
}
console.log( idList );

如您所见，您甚至不需要jQuery来完成如此简单的任务。

这个？

function calc(){
    var q = ""
    $("input[type=checkbox]:checked").each(function(){
        if (q != "") q += " or "
        q+= " champion = '" + $(this).attr("id") + "'"
    })
    return "var myString = '"" + q + "'"";
}

参见 JSFIDDLE http://jsfiddle.net/alemarch/nfryb2wj/

你在寻找这样的东西吗？

var champions = [];
function getChampions() {
  champions = $('li input:checked').map(function(){ return this.id }).get();
  $('#x').html( JSON.stringify(champions) );
}
  
$('input').on('change',getChampions);
getChampions();
input:before {
  content: attr(id);
  margin-left: 1.5em;
}
#x {
  padding: 1em;
  background-color: #FED;
  border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><input type="checkbox" id="id1"/></li>
    <li><input type="checkbox" id="id2"/></li>
    <li><input type="checkbox" id="id3"/></li>
    <li><input type="checkbox" id="id4"/></li>
</ul>
<pre id="x" title="debug"></pre>

相关文章：