[英]Javascript - ading a checked radio input on a variable after submitting the form
I am trying to create a rock paper scissors game.我正在尝试创建一个石头剪刀布游戏。
The user choice must populate as a variable using a form with a radio button.用户选择必须使用带有单选按钮的表单填充为变量。
When I click on submit I would like to have the radio button checked to be passed as a variable.当我单击提交时,我希望选中单选按钮以作为变量传递。 How can I get the users choice?我怎样才能得到用户的选择?
<div id="global">
<h1>Jeu Pierre Feuille Ciseau</h1>
<h3>Choisissez Pierre, Feuille ou Ciseaux:</h3>
<div>
<input type="radio" id="pierre" name="game" value="pierre" checked>
<label for="pierre">Pierre</label>
</div>
<div>
<input type="radio" id="feuille" name="game" value="feuille">
<label for="pierre">Feuille</label>
</div>
<div>
<input type="radio" id="ciseaux" name="game" value="ciseaux">
<label for="pierre">Ciseaux</label>
</div>
<button id="submit">Submit</button>
</div>
<script type="text/javascript">
window.document.getElementById("submit").onclick = function(){
}
</script>
This would be something simple with jQuery and using $("input[name='game']:checked").val()
使用 jQuery 并使用$("input[name='game']:checked").val()
会很简单
$(document).ready(function(){ $("input[type='button']").click(function(){ var radioValue = $("input[name='game']:checked").val(); if(radioValue){ alert("Value - " + radioValue); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="global"> <h1>Jeu Pierre Feuille Ciseau</h1> <h3>Choisissez Pierre, Feuille ou Ciseaux:</h3> <div> <input type="radio" id="pierre" name="game" value="pierre" checked> <label for="pierre">Pierre</label> </div> <div> <input type="radio" id="feuille" name="game" value="feuille"> <label for="pierre">Feuille</label> </div> <div> <input type="radio" id="ciseaux" name="game" value="ciseaux"> <label for="pierre">Ciseaux</label> </div> <input type="button" value="Submit"> </div>
You can do this by iterating through the radio buttons and finding the element that has been checked.您可以通过遍历单选按钮并找到已检查的元素来完成此操作。 From that point you can do whatever you like with the value从那时起,您可以随心所欲地使用价值
<div id="global">
<h1>Jeu Pierre Feuille Ciseau</h1>
<h3>Choisissez Pierre, Feuille ou Ciseaux:</h3>
<div>
<input type="radio" id="pierre" name="game" value="pierre" checked>
<label for="pierre">Pierre</label>
</div>
<div>
<input type="radio" id="feuille" name="game" value="feuille">
<label for="pierre">Feuille</label>
</div>
<div>
<input type="radio" id="ciseaux" name="game" value="ciseaux">
<label for="pierre">Ciseaux</label>
</div>
<button id="submit">Submit</button>
window.document.getElementById("submit").onclick = function(){
var radioButtons = document.getElementsByName('game');
for (var i = 0, length = radioButtons.length; i < length; i++){
if (radioButtons[i].checked){
// do whatever you want with the checked radio
alert(radioButtons[i].value);
// only one radio button can be checked so break the loop
break;
}
}
}
Here is a codepen to try it out: https://codepen.io/jpcobalt/pen/qBBqWyd这是一个可以试用的代码笔: https://codepen.io/jpcobalt/pen/qBBqWyd
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.