[英]Set hidden input value depending on radio button selection
I have a checklist form that tallies a score based on the radio button selection that is working fine. 我有一个清单表,该表根据工作正常的单选按钮选择得出分数。 When I post the form I want to get a value of "yes" or "no" from a hidden input with the same class based on radio button selection.
当我发布表单时,我想根据单选按钮选择从具有相同类的隐藏输入中获得“是”或“否”的值。
Because the "value" field is taken up by an integer for the scoring I want to pass a value to a hidden form input with the same class name. 因为“值”字段由整数占据,所以我想将值传递给具有相同类名的隐藏表单输入。 The value of the hidden input will be "no" if the value of the radio button selected is 0, or else it will be "yes".
如果选择的单选按钮的值为0,则隐藏输入的值为“ no”,否则为“ yes”。
I would like to be able to iterate it through all radio input groups (there are many). 我希望能够遍历所有无线电输入组(有很多)。 This is what I am trying to acheive in jquery written in English:
这就是我试图用英语写的jQuery实现的目的:
FOR each radio input group, IF the value of radio button selected is 0 then value of hidden input with the same class is "No", ELSE it is "yes". 对于每个单选输入组,如果选择的单选按钮的值为0,则具有相同类别的隐藏输入的值为“否”,否则为“是”。
I am having trouble with the javascript and would appreciate some assistance. 我在使用javascript时遇到问题,请多多帮助。
HTML 的HTML
<!--Radio button example -->
<li>
<label>Does 1 + 1 equal 10 ?</label>
<input type="radio" class="radio1" name="question" value="1">Yes</input>
<input type="radio" class="radio1" name="question" value="0">No</input>
<input type="hidden" value="" id="answer" class="radio1"></input>
</li>
Thank you in advance, please let me know if you need more information. 预先谢谢您,如果您需要更多信息,请告诉我。
Attach a JQuery event to radiobutton change 将JQuery事件附加到单选按钮更改
$(document).ready(function() {
$('input.radio1[type=radio]').change(function() { //change event by class
if (this.value == '0') {
$(this.ClassName[type=hidden]).val("No");
}
else if (this.value == '1') {
$(this.ClassName[type=hidden]).val("Yes");
}
});
});
This code may contain syntax errors, consider this as a pseudo code and Do It Yourself 该代码可能包含语法错误,请将其视为伪代码并自己动手做
$(function() { //$("#questionnaire").on("submit", // better but not allowed in the SO snippet $("#send").on("click", function(e) { e.preventDefault(); // remove when tested $("#questionnaire ul li").each(function() { var $checkedRad = $(this).find('input[name^=question]:checked'); var $answerField = $(this).find("input[name^=answer]"); $answerField.val($checkedRad.val()=="0"?"NO":"YES"); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form id="questionnaire"> <ul id="questions"> <li> <label>Does 1 + 1 equal 10 ?</label> <input type="radio" class="radio" name="question1" value="1">Yes</input> <input type="radio" class="radio" name="question1" value="0">No</input> <input type="hidden" value="" name="answer1" class="radio"></input> </li> <li> <label>Does 1 + 1 equal 20 ?</label> <input type="radio" class="radio" name="question2" value="1">Yes</input> <input type="radio" class="radio" name="question2" value="0">No</input> <input type="hidden" value="" name="answer2" class="radio"></input> </li> </ul> <button id="send" type="button">Click</button> </form>
$("input[type='radio']:checked").each(function(i, element) {
var hiddenVal = $(element).value() === "0" ? "No" : "yes"
$("." + $(element).attr("class") + "[type='hidden']").val(hiddenVal);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.