gpt4 book ai didi

javascript - 对多个 HTML 复选框执行条件

转载 作者:行者123 更新时间:2023-11-28 03:13:54 26 4
gpt4 key购买 nike

所以我之前就同一问题发表过一篇文章,但我删除了该文章并进一步简化了我的代码并纠正了一些错误。所以我这里的目标是根据所选的属性和技能给出玩家的建议。

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com