所以我之前就同一问题发表过一篇文章，但我删除了该文章并进一步简化了我的代码并纠正了一些错误。所以我这里的目标是根据所选的属性和技能给出玩家的建议。
function random() {
var a = document.getElementById("Position").value;
document.getElementById("output").innerHTML = a;
if (a) {
console.log("Great Choice");
}
}
var val = 0,
form = document.forms.skills,
text = skills.elements.type;
form.addEventListener("change", function(e) {
var checkboxes = form.querySelectorAll("[type='checkbox']");
text.value = "";
Array.from(checkboxes).forEach(function(checkbox) {
if (checkbox.checked) {
text.value += checkbox.value + "\n";
}
});
});<body style="background-color:powderblue;">
<h1>NBA Draft Prediction</h1>
<br>
<a href="default.asp">
<img src="https://basketball91.com/files/2013/06/basketball-positions.gif" alt="Daruis Garland" style="float:centre;width:300px;height:300px;" align="middle">
</a>
<br>
<h2> Choose the required position </h2>
<select id="Position" onchange="random()">
<option>Choose Position</option>
<option value="Scoring Guard">Scoring Guard</option>
<option value=" 3 & D Guard">3 & D Guard</option>
<option value="Passing Guard">Passing Guard</option>
<option value="Forward">Scoring Forward</option>
<option value="3&D Forward">3 & D Forward</option>
<option value="Scoring Center">Scoring Center</option>
<option value="Defending Center">Defending Center</option>
<option value="Ring Protector">Rim Protector</option>
</select>
<br>
<br> You have Chosen the position of:
<div id="output"></div>
<br>
<h2> Choose the required Skills</h2>
<form name="skills" method="post">
<label><input type="checkbox" name="j1" value="Height" class="anyclass"/> Height</label>
<label><input type="checkbox" name="j2" value="Weight" class="anyclass" /> Weight</label>
<label><input type="checkbox" name="j3" value="ArmLength" class="anyclass" /> Arm Length</label>
<label><input type="checkbox" name="j4" value="FingerLength" class="anyclass" /> Finger Length </label><br>
<h3>You have chosen:
<textarea name="type" rows="5" cols="10"></textarea>请忽略此处的评论。 例如，假设用户选择“得分后卫”之类的位置。用户选择属性作为“高度”和“体重”。根据这些选择，我希望输出为文本，例如“Player1”。
也欢迎任何建议。
最佳答案
<html>
<head>
<title>NBA Draft Player Suggestion</title>
</head>
<!--<style>
body {
background-image: url('Img3.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
-->
<body style="background-color:powderblue;">
<h1>NBA Draft Prediction</h1>
<br>
<a href="default.asp">
<img src="https://basketball91.com/files/2013/06/basketball-positions.gif" alt="Daruis Garland" style="float:centre;width:300px;height:300px;" align="middle">
</a>
<br>
<br>
<br>
<h2> Choose the required position </h2>
<select id="Position" onchange="random()">
<option>Choose Position</option>
<option value="Scoring Guard">Scoring Guard</option>
<option value=" 3 & D Guard">3 & D Guard</option>
<option value="Passing Guard">Passing Guard</option>
<option value="Forward">Scoring Forward</option>
<option value="3&D Forward">3 & D Forward</option>
<option value="Scoring Center">Scoring Center</option>
<option value="Defending Center">Defending Center</option>
<option value="Ring Protector">Rim Protector</option>
</select>
<br>
<br> You have Chosen the position of:
<div id="output"></div>
<br>
<h2> Choose the required Skills</h2>
<form name="skills" method="post">
<label><input type="checkbox" name="j1" value="Height" class="anyclass"id="ch1"/> Height</label>
<label><input type="checkbox" name="j2" value="Weight" class="anyclass" id="ch2"/> Weight</label>
<label><input type="checkbox" name="j3" value="ArmLength" class="anyclass" id="ch3"/> Arm Length</label>
<label><input type="checkbox" name="j4" value="FingerLength" class="anyclass" id="ch4"/> Finger Length </label><br>
<h3>You have chosen:
<textarea name="type" rows="5" cols="10"></textarea>
<button name="btn" onclick="random()">Get Result</button>
<!--<br>
<a href="NBA_2nd_Page.html" class="btn btn-info" role="button">Click Here To Go To Next Page</a>
-->
<script>
var val = 0,
form = document.forms.skills,
text = skills.elements.type;
form.addEventListener("change", function(e) {
var checkboxes = form.querySelectorAll("[type='checkbox']");
text.value = "";
Array.from(checkboxes).forEach(function(checkbox) {
if (checkbox.checked) {
text.value += checkbox.value + "\n";
}
});
});
function random() {
var a = document.getElementById("Position").value;
document.getElementById("output").innerHTML = a;
if(a == 'Scoring Guard' && document.getElementById("ch1").checked == true && document.getElementById("ch2").checked == true){
alert('Player1');
}
}
</script>
</body>
</html>
关于javascript - 对多个 HTML 复选框执行条件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59820224/