Question

代码如下所示：

<div id="list">
  <input type="checkbox" id="1">
  <input type="checkbox" id="2">
  <input type="checkbox" id="3">
</div>

在另一个html窗格（单独的模板）中，我想将所有这些复选框（checked / unchecked）布尔值存储到一个数组中。我做了什么看起来像：

var array = [];
var checkboxli = document.getElementsByTagName("input");
for (var i = 0; i < checkboxli.length; i++)
{
  array.push($("#input.prop('checked')"));
}

然而，这不起作用。我有其他使用标记名“input”的模板，因此我需要将标记名称限制为"#list" id下的标记（可能是某种css选择器）。目前，document.getElementsByTagName("input")和$("#input.prop('checked')")都不起作用。可能存在其他语法问题。请帮我解决。感谢。

编辑：好像我没有很好地表达我的意图。这是我想要从列表中得到的：一个看起来像

的数组

[true, false, true, true, true...]

其中每个布尔值表示是否选中了相应的输入复选框。

Answer 1

由于你已经在使用jquery，你可以这样：

假设这个HTML

<div id="list">
  <input type="checkbox" id="1" checked="checked">
  <input type="checkbox" id="2">
  <input type="checkbox" id="3" checked="checked">
</div>

这个脚本：

var array = [];
$("input[type='checkbox']","#list").each(function(){
     array.push($(this).is(":checked"));
});

你会得到这样的东西：

array = [ true, false, true ];

Answer 2

而不是：

var checkboxli = document.getElementsByTagName("input");

你可以使用：

var checkboxli = document.querySelectorAll("#list>input[type=checkbox]"); //array of checkboxes

现在你已经拥有了list元素下的所有复选框。

如果您只想使用选中的复选框：

var checkboxli = document.querySelectorAll("#list>input[type=checkbox][checked]");

Answer 3

尝试以下代码。它会检索所有IDs checked中的所有check-boxes，存储在array中，然后将local-storage存储为string：

var itemsChecked = [] ;
$('input[type=checkbox]:checked').each(function(index, item){
   itemsChecked.push($(item).attr('id'));
})

localStorage.setItem('selectedItems', JSON.stringify(itemsChecked));

稍后，要从localstorage检索数据，请使用以下命令：

var items = JSON.parse(localStorage.getItem('selectedItems')); 
// returns array of IDs

Answer 4

更合适的方法是从正文中捕获每个元素的XPath。您可以使用getPath jQuery插件，因此您不会依赖于像List这样的特定字符串。

jQuery.fn.extend({
    getPath: function( path ) {
       // The first time this function is called, path won't be defined.
       if ( typeof path == 'undefined' ) path = '';

       // If this element is <html> we've reached the end of the path.
       if ( this.is('html') )
           return 'html' + path;

       // Add the element name.
       var cur = this.get(0).nodeName.toLowerCase();

       // Determine the IDs and path.
       var id = this.attr('id'),
           class = this.attr('class');

       // Add the #id if there is one.
       if ( typeof id != 'undefined' )
          cur += '#' + id;

       // Add any classes.
       if ( typeof class != 'undefined' )
          cur += '.' + class.split(/[\s\n]+/).join('.');

       // Recurse up the DOM.
       return this.parent().getPath( ' > ' + cur + path );
   }
});

如何使用localstorage将列表中的所有复选框布尔值存储到数组中？

4 个答案: