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 developer模式下查看“interest”对象时，它表示样式未定义。我在循环复选框时遇到问题，或者我是如何将复选框的值存储到对象中的问题？

Answer 1

记录数据

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

您的问题

  

我的循环复选框是否存在问题，或者我是如何将复选框的值存储到对象中的问题？

循环数据的方法也很多，而且每种方式都有其优点和缺点。你的循环工作并且不是坏代码但是（来自MDN docs about getElementsByName）：

  

name属性仅适用于（X）HTML文档。该方法返回实时NodeList集合，其包含具有name属性的给定值的所有元素，例如＆lt; meta＆gt;或＆lt; object＆gt;或者甚至将名称放在完全不支持name属性的元素上。

在迭代它们时，使用“实时NodeList”有时会产生意外结果。使用.from()将NodeList转换为Array可以解决那些可能的打击问题。

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

你出错的地方

该行：

interest.styles = sbox.value;

声明“interest”value“styles”的字符串property等于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。在这种情况下，函数可能更好地称为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由“styles”组成，布尔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>

Answer 2

<@>正如@Donovan所说，你应该在你的循环中使用sbox [i]引用，我也建议在那里添加数组和推送值，并且还要照顾它，甚至更好的只是替换更改后的值..

var interest = {
    styles: [],
};

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

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