Javascript循环遍历复选框并将值存储在对象中

Question

我是 JavaScript 新手，正在学习如何将值存储到自定义对象中。我正在创建一个程序，它将循环遍历一系列复选框，并将选中框的值存储到一个对象中。

我已将代码精简为最简单的版本

可以在 JSfiddle 上查看:https://jsfiddle.net/Buleria28/tyapjno2/1/

HTML 是:

<form>
  <div>
    <label>
      <input type="checkbox" name="style" value="classical" 
       onchange="add()">Classical</label>
    <label>
      <input type="checkbox" name="style" value="Rock" 
       onchange="add()">Rock</label>
    <label>
     <input type="checkbox" name="style" value="Jazz" 
     onchange="add()">Jazz</label>
    <label>
     <input type="checkbox" name="style" value="Folk" 
     onchange="add()">Folk</label>
  </div>
</form>

JavaScript 是:

var interest = {
    styles: "",
};

function add(){
    var sbox = document.getElementsByName("style");
    for (var i=0; i<sbox.length; i++){
    if (sbox[i].checked == true){
    interest.styles = sbox.value;   
        }
    }
 }

当我尝试在 Chrome 开发者模式下查看“兴趣”对象时，它说样式未定义。我循环遍历复选框是否存在问题，或者我如何将复选框的值存储到对象中存在问题？

Answer 1

记录数据

需要注意的是，记录/存储数据的方法有很多种，每种方法对于一种情况可能是理想的，但对于另一种情况来说可能很糟糕。这完全取决于您想要如何使用存储的数据，以及如何最好地存储它。

您的问题

Is there an issue with my looping through the check boxes or an issue with how I am storing the value of the checked boxes into the object?

循环数据的方法也有很多种，同样，每种方法都有其优点和缺点。您的循环有效，并且不是坏代码，但是(来自 MDN docs about getElementsByName ):

The name attribute is only applicable to (X)HTML documents. The method returns a live NodeList Collection that contains all elements with a given value for the name attribute, such as <meta> or <object> or even if name is placed on elements which do not support a name attribute at all.

使用“实时 NodeList”进行迭代时有时会产生意外结果。将 NodeList 转换为 Array通过使用 .from() 避开那些可能出现的打嗝。

更好的是简单地使用 querySelectorAll( "input[name=style]" )

哪里出了问题

行:

interest.styles = sbox.value;

表示字符串value “兴趣”的property “styles”等于 NodeList 的值，而不是 <input> 的值元素。 NodeList 没有值，因此值始终为 undefined .

interest.styles = sbox[ i ].value;

将解决第一个问题，但是你只存储最后检查的 value 。如果选中了 3 个复选框，则只会记住一个。

interest.styles += sbox[ i ].value;

会存储所有选中复选框的值，但字符串会很乱。可以添加一些格式来改进它，但还有更简单、更有用的方法。

将“样式”添加到 array

这将取决于您获得“样式”后想要如何处理它们，但这会创建一个 array所有选定的“样式”。

如果需要，请索取更多详细信息。

var interest = {
    "styles": [] // use an array to store the styles
};

function add(){
    var sbox = Array.from( document.getElementsByName( "style" ) );
    interest.styles = []; // empty the array before rebuilding it
    sbox.forEach( function( v ) {
        if ( v.checked ) {
            interest.styles.push( v.value );   
        }
    } );
    // console output for demo
    console.log( interest.styles ); // array
    console.log( interest.styles.join() ); // CSV
    console.log( interest.styles.join( " " ) ); // for HTML class attributes
}

<form>
  <div>
    <label>
      <input type="checkbox" name="style" value="classical" 
       onchange="add()">Classical</label>
    <label>
      <input type="checkbox" name="style" value="Rock" 
       onchange="add()">Rock</label>
    <label>
     <input type="checkbox" name="style" value="Jazz" 
     onchange="add()">Jazz</label>
    <label>
     <input type="checkbox" name="style" value="Folk" 
     onchange="add()">Folk</label>
  </div>
</form>

优化

添加 add()功能到<form>元素，处理所有形式 change es 在一个地方。在这种情况下，该函数可能更好地称为 update() .

var interest = {
    "styles": [] // use an array to store the styles
};

function update(){
    var sbox = Array.from( document.getElementsByName( "style" ) );
    interest.styles = []; // empty the array before rebuilding it
    sbox.forEach( function( v ) {
        if ( v.checked ) {
            interest.styles.push( v.value );   
        }
    } );
    // console output for demo
    console.log( interest.styles ); // array
    console.log( interest.styles.join() ); // CSV
    console.log( interest.styles.join( " " ) ); // for HTML class attributes
}

<form onchange="update()">
  <div>
    <label>
      <input type="checkbox" name="style" value="classical">Classical</label>
    <label>
      <input type="checkbox" name="style" value="Rock">Rock</label>
    <label>
     <input type="checkbox" name="style" value="Jazz">Jazz</label>
    <label>
     <input type="checkbox" name="style" value="Folk">Folk</label>
  </div>
</form>

此外，请考虑使用 addEventListener 而不是内联事件。

或者创建一个object

使用 key 创建对象s 由“样式”和 bool 值 value 组成s 等于相应的 .checked可以派上用场。

var interest = {
    "styles": {} // use an object to store the styles
};

function update(){
    var sbox = Array.from( document.getElementsByName( "style" ) );
    sbox.forEach( function( v ) {
        interest.styles[ v.value ] = v.checked; // e.g. interest.styles.Rock = false
    } );
    // console output for demo
    console.log( interest.styles.Rock ); // does this user like "Rock"?
}

<form onchange="update()">
  <div>
    <label>
      <input type="checkbox" name="style" value="classical">Classical</label>
    <label>
      <input type="checkbox" name="style" value="Rock">Rock</label>
    <label>
     <input type="checkbox" name="style" value="Jazz">Jazz</label>
    <label>
     <input type="checkbox" name="style" value="Folk">Folk</label>
  </div>
</form>