Question

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

var my_string =“champion ='id1'或冠军='id2'或冠军='id3'或冠军='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进行操作？

Answer 1

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

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

Answer 2

要获取所有复选框，您可以使用相应的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来完成这么简单的任务。

Answer 3

以下适用于您的特定示例。它查询所有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>

Answer 4

此？

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/

Answer 5

你正在寻找这样的东西吗？

＆＃13;

var champions = [];

function getChampions() {
  champions = $('li input:checked').map(function(){ return this.id }).get();
  $('#x').html( JSON.stringify(champions) );
}
  
$('input').on('change',getChampions);

getChampions();

＆＃13;

input:before {
  content: attr(id);
  margin-left: 1.5em;

}
#x {
  padding: 1em;
  background-color: #FED;
  border: 1px solid gray;
}

＆＃13;

<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>

＆＃13;

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

5 个答案: