Javascript:一个函数可以检查同一组中的各个复选框，并单独存储答案

我对 js 很陌生，我已经搜索这个答案好几天了。我正在处理一个小个人项目，其中包含复选框。

我有一个函数应该可以帮助生成代码以复制/粘贴/保存为新的 html。由于我是 js 新手，我在验证复选框正常工作时遇到问题，并让它一次检查每个复选框(不是作为一组/数组)，然后保存单个值将其应用于生成代码的函数，以便可以将其添加到正确的位置。

我有这个JS Bin供您查看，这可能有助于更好地解释它，特别是如果您按“获取代码”按钮。

我知道有一种更好的方法可以让它执行代码，但我似乎无法得到我必须正确生成的内容。当我按下“获取代码”按钮时，我总是看到代码，而不是我想看到的复选标记。

我只擅长(不是很好)html 和 css。

如果您能提供任何帮助，我将不胜感激。

html。

<!DOCTYPE html>
<html>
<head>
<title>SCV</title>
</head>
<body>
<form name="inputRelations" id="inputRelations">
  <h2>Relations</h2>
    <div id="rel">
     <table class="rel2"><tr><td>
       <input type="checkbox" name="chb[]" id="crush" value="&#9745;"/>
       <label for="crush">Crush</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="love" value="&#9745;"/>
       <label for="love">Love</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="engaged" value="&#9745;"/>
       <label for="engaged">Engaged</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="married" value="&#9745;"/>
       <label for="married">Married</label>
       </td></tr><tr><td>
       <input type="checkbox" name="chb[]" id="friends" value="&#9745;"/>
       <label for="friends">Friends</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="buddies" value="&#9745;"/>
       <label for="buddies">Buddies</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="known" value="&#9745;"/>
       <label for="known1">Known</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="bff" value="&#9745;"/>
       <label for="bff">BFF</label>
       </td></tr><tr><td>
       <input type="checkbox" name="chb[]" id="steady" value="&#9745;"/>
       <label for="steady">Steady</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="family" value="&#9745;"/>
       <label for="family">Family</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="enemy" value="&#9745;"/>
       <label for="enemy">Enemy</label>
       </td><td>
       <input type="checkbox" name="chb[]" id="unknown" value="&#9745;"/>
       <label for="unknown">Unknown</label>
       </td></tr>
       </table>
   </div>
   <nav id="box2" class="hide"><table id="menu3"><tr><td rowspan="2" id="soft">
   <textarea name="source2" onclick="this.focus();this.select()" cols="40" rows="10"></textarea>
   </td><td>
   <input type="button" value="Get Code!" onclick="javascript:generateRelations();"></td>
   <td rowspan="2" id="softA">
   <img src="./forSCV/icons/relations.png" alt="Relations" title="Relations" id="arrow" onclick="toggle('box2');">
   </td></tr><tr><td>
   <input type="button" value="Test Code" onclick="javascript:displayRelations(this.form);">
   </td></tr></table></nav>
</form></div>
</body>
</html>

JS。

function generateRelations() {
var feelingsFor = document.inputRelations.feelingsFor.value;
var relationType = document.inputRelations.relationType.value;
var dailyA = document.inputRelations.dailyA.value;
var dailyB = document.inputRelations.dailyB.value;
var lifetimeA = document.inputRelations.lifetimeA.value;
var lifetimeB = document.inputRelations.lifetimeB.value;

// I need it to check if these individual checkmarks are checked then save
// the value to insert into the outputRelations section of this function
// (generateRelations)

// There has to be a more condensed way to do this.
var crush = function() {
  var c1 = document.inputRelations.crush;
    if (c1.type == 'checkbox' && c1.checked === true){
  return c1.value;}
    else {
  return '';
    }
};

var love = function() {
  var l1 = document.inputRelations.love;
    if (l1.type == 'checkbox' && l1.checked === true){
  return l1.value;}
    else {
  return '';
    }
};

var engaged = function() {
  var e1 = document.inputRelations.engaged;
    if (e1.type == 'checkbox' && e1.checked === true){
  return e1.value;}
    else {
  return '';
    }
};

var married = function() {
  var m1 = document.inputRelations.married;
    if (m1.type == 'checkbox' && m1.checked === true){
      return m1.value;}
    else {
      return '';
    }
};

var friends = function() {
  var f1 = document.inputRelations.friends;
    if (f1.type == 'checkbox' && f1.checked === true){
      return f1.value;}
    else {
      return '';
    }
};

var buddies = function() {
  var b1 = document.inputRelations.buddies;
    if (b1.type == 'checkbox' && b1.checked === true){
      return b1.value;}
    else {
      return '';
    }
};

var known = function() {
  var k1 = document.inputRelations.known;
    if (k1.type == 'checkbox' && k1.checked === true){
      return k1.value;}
    else {
      return '';
    }
};

var bff = function() {
  var bA = document.inputRelations.bff;
    if (bA.type == 'checkbox' && bA.checked === true){
      return bA.value;}
    else {
      return '';
    }
};

var steady = function() {
  var s1 = document.inputRelations.steady;
    if (s1.type == 'checkbox' && s1.checked === true){
      return s1.value;}
    else {
      return '';
    }
};

var family = function() {
  var f1 = document.inputRelations.family;
    if (f1.type == 'checkbox' && f1.checked === true){
      return f1.value;}
    else {
      return '';
    }
};

var enemy = function() {
  var e1 = document.inputRelations.enemy;
    if (e1.type == 'checkbox' && e1.checked === true){
      return e1.value;}
    else {
      return '';
    }
};

var unknown = function() {
  var u1 = document.inputRelations.unknown;
    if (u1.type == 'checkbox' && u1.checked === true){
      return u1.value;}
    else {
      return '';
    }
};

// I want to add the checkbox values in this section.
// I need individual values to do so. Not a list.
outputRelations = "<a name='relations'></a>\n<div id='easy'>\n<h2>Relations</h2>\n
<div id='rel'>\n<div id='rela'>\n<table class='rel'><th colspan='2'>My feelings towards 
"+feelingsFor+"</th><tr><td>Relation Type:</td><td class='white'>"+relationType+"</td>
</tr><tr><td>Daily:</td><td class='white'>"+dailyA+" / "+dailyB+"</td></tr><tr><td>
Lifetime:</td><td class='white'>"+lifetimeA+" / "+lifetimeB+"</td></tr></table>
<table class='rel1'><tr><td class='white'>"+crush+"</td><td>Crush</td><td class='white'>
"+love+"</td><td>Love</td><td class='white'>"+engaged+"</td><td>Engaged</td><td class='white'>
"+married+"</td><td>Married</td></tr><tr><td class='white'>"+friends+"</td><td>Friends
</td><td class='white'>"+buddies+"</td><td>Buddies</td><td class='white'>"+known+"
</td><td>Known</td><td class='white'>"+bff+"</td><td>BFF</td></tr><tr><td class='white'>
"+steady+"</td><td>Steady</td><td class='white'>"+family+"</td><td>Family</td><td class='white'>
"+enemy+"</td><td>Enemy</td><td class='white'>"+unknown+"</td><td>Unknown</td></tr>
</table>\n</div>\n</div>\n</div>\n";

document.inputRelations.source2.value = outputRelations;

return outputRelations;
}

我得到了我想要的答案，但我还有一个。是否有更好/简洁的方法来处理嵌套函数？

最佳答案

编辑我发现了你的错误。

当您使用时

class='white'>"+crush+"Crush

它必须像crush()一样使用

class='white'>"+crush()+"</td><td>Crush</td>

因为您正在调用一个函数，所以它将返回值而不是函数

更改这些

var 粉碎 = 函数() { var c1 = document.inputRelations.crush; var c2 = c1.长度； if (c2[i].type == 'checkbox' && c2[i].checked === true); 返回c2.值； };

修改为

var crush = function() {
  var c1 = document.inputRelations.crush;
    if (c1.type == 'checkbox' && c1.checked === true);
      return c1.value;
};

你不能使用c2[i].value c2[i] 不在循环中，它只是一个数字，它不是复选框，c1 是复选框。 c2 只是 checkbox.length，你不需要它。我希望这有帮助。如果您需要更多指导，请告诉我。

关于Javascript:一个函数可以检查同一组中的各个复选框，并单独存储答案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35530457/

Javascript:一个函数可以检查同一组中的各个复选框，并单独存储答案

上一篇：javascript - Uncaught ReferenceError : getPrice is not defined

下一篇：javascript - 以php形式调用javascript函数