Javascript: 一个函数用于检查同一组中的各个复选框，并单独存储答案
Javascript: one function to check individual checkboxes in the same group, and store the answer individually
我是 js 的新手，几天来我一直在寻找这个答案。我有一个我正在做的个人项目，它包括复选框。
我有一个函数可以帮助生成 copy/paste/save 作为新 html 的代码。由于我是 js 的新手，我在验证复选框正常工作时遇到了问题，并且让它一次检查一个复选框（而不是 group/array），然后到 保存单个值 以将其应用于生成代码的函数，以便它可以在正确的位置 +added+。
我有这个 JS Bin 供您查看，这可能有助于更好地解释它，尤其是当您按下 'Get Code' 按钮时。
我知道有更好的方法让它执行代码，但我似乎无法正确生成我必须要做的事情。当我按下 'Get Code' 按钮 而不是我想看到的复选标记时，我一直 看到代码。
我只在 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="☑"/>
<label for="crush">Crush</label>
</td><td>
<input type="checkbox" name="chb[]" id="love" value="☑"/>
<label for="love">Love</label>
</td><td>
<input type="checkbox" name="chb[]" id="engaged" value="☑"/>
<label for="engaged">Engaged</label>
</td><td>
<input type="checkbox" name="chb[]" id="married" value="☑"/>
<label for="married">Married</label>
</td></tr><tr><td>
<input type="checkbox" name="chb[]" id="friends" value="☑"/>
<label for="friends">Friends</label>
</td><td>
<input type="checkbox" name="chb[]" id="buddies" value="☑"/>
<label for="buddies">Buddies</label>
</td><td>
<input type="checkbox" name="chb[]" id="known" value="☑"/>
<label for="known1">Known</label>
</td><td>
<input type="checkbox" name="chb[]" id="bff" value="☑"/>
<label for="bff">BFF</label>
</td></tr><tr><td>
<input type="checkbox" name="chb[]" id="steady" value="☑"/>
<label for="steady">Steady</label>
</td><td>
<input type="checkbox" name="chb[]" id="family" value="☑"/>
<label for="family">Family</label>
</td><td>
<input type="checkbox" name="chb[]" id="enemy" value="☑"/>
<label for="enemy">Enemy</label>
</td><td>
<input type="checkbox" name="chb[]" id="unknown" value="☑"/>
<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;
}
我得到了我想要的答案，但我还有一个。有没有 better/condensed 处理嵌套函数的方法？
编辑我发现了你的错误。
当你使用
class='white'>"+crush+"Crush
必须像crush()
一样使用
class='white'>"+crush()+"</td><td>Crush</td>
因为您正在调用一个函数，所以它将 return 值而不是函数
改变这些
var crush = function() {
var c1 = document.inputRelations.crush;
var c2 = c1.length;
如果 (c2[i].type == 'checkbox' && c2[i].checked === true);
return c2.value;
};
改为
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，您不需要它。
我希望这有帮助。如果您需要更多指导，请告诉我。
我是 js 的新手，几天来我一直在寻找这个答案。我有一个我正在做的个人项目，它包括复选框。
我有一个函数可以帮助生成 copy/paste/save 作为新 html 的代码。由于我是 js 的新手，我在验证复选框正常工作时遇到了问题，并且让它一次检查一个复选框（而不是 group/array），然后到 保存单个值 以将其应用于生成代码的函数，以便它可以在正确的位置 +added+。
我有这个 JS Bin 供您查看，这可能有助于更好地解释它，尤其是当您按下 'Get Code' 按钮时。
我知道有更好的方法让它执行代码，但我似乎无法正确生成我必须要做的事情。当我按下 'Get Code' 按钮 而不是我想看到的复选标记时，我一直 看到代码。
我只在 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="☑"/>
<label for="crush">Crush</label>
</td><td>
<input type="checkbox" name="chb[]" id="love" value="☑"/>
<label for="love">Love</label>
</td><td>
<input type="checkbox" name="chb[]" id="engaged" value="☑"/>
<label for="engaged">Engaged</label>
</td><td>
<input type="checkbox" name="chb[]" id="married" value="☑"/>
<label for="married">Married</label>
</td></tr><tr><td>
<input type="checkbox" name="chb[]" id="friends" value="☑"/>
<label for="friends">Friends</label>
</td><td>
<input type="checkbox" name="chb[]" id="buddies" value="☑"/>
<label for="buddies">Buddies</label>
</td><td>
<input type="checkbox" name="chb[]" id="known" value="☑"/>
<label for="known1">Known</label>
</td><td>
<input type="checkbox" name="chb[]" id="bff" value="☑"/>
<label for="bff">BFF</label>
</td></tr><tr><td>
<input type="checkbox" name="chb[]" id="steady" value="☑"/>
<label for="steady">Steady</label>
</td><td>
<input type="checkbox" name="chb[]" id="family" value="☑"/>
<label for="family">Family</label>
</td><td>
<input type="checkbox" name="chb[]" id="enemy" value="☑"/>
<label for="enemy">Enemy</label>
</td><td>
<input type="checkbox" name="chb[]" id="unknown" value="☑"/>
<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;
}
我得到了我想要的答案，但我还有一个。有没有 better/condensed 处理嵌套函数的方法？
编辑我发现了你的错误。
当你使用
class='white'>"+crush+"Crush
必须像crush()
class='white'>"+crush()+"</td><td>Crush</td>
因为您正在调用一个函数，所以它将 return 值而不是函数
改变这些
var crush = function() { var c1 = document.inputRelations.crush; var c2 = c1.length; 如果 (c2[i].type == 'checkbox' && c2[i].checked === true); return c2.value; };
改为
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，您不需要它。 我希望这有帮助。如果您需要更多指导，请告诉我。