jQuery单选按钮功能不能正常工作

Question

我有一个带有两个单选按钮和一个提交按钮的表单，该按钮会根据用户的选择生成一个特定的表单。我想使用jQuery在两个按钮之间进行更改，但已经让自己有点迷路了。

这是我的javascript从另一个文件在项目:

function goTo()
{
var yesButton = $('#yesRad');
var noButton = $('#noRad');
if (yesButton[0].checked) 
{
submitForm('yesForm') && noButton.Checked==false;

}
else  (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}

在jsp中，我有以下代码:

<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />
    <input type="hidden"  name="mode" value="1" />
    <input type="radio"  name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />
    <input type="hidden"  name="mode" value="1" />
    <input type="radio" name="radio" id="noRad"  value="noForm" />No<br>
</form:form>

提交

<script>
    $("#yesRad").change(function(){
        var $input = $("#yesRad");
        var $inputb = $("#noRad");
        if($inputb.is(':checked'))
            $("#yesRad").prop("checked", false);
        else  if($input.is(':checked'))
            $("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);
});
</script>

我已经从我的jQuery中获得了一些功能，但它绝对是不正确的。我希望我的问题讲得清楚透彻。提前感谢!!

Answer 1

首先，不要使用prop，使用attr。道具较慢。你已经定义了变量，我们不用再查了。在你的if/else语句中只使用变量。我不太清楚你想用这些钱做什么。我怀疑你在尝试设置两个输入的值。如果是这样，它们应该是单独的语句。如果输入为checked，则没有理由将其设置为checked，因此我们可以删除该部分。

您可能希望此更改对两个输入都触发。

$("#yesRad, #noRad").change(function(){
    var $input = $("#yesRad");
    var $inputb = $("#noRad");
    if($inputb.is(':checked')){
        $input.attr("checked", false);
    } else if($input.is(':checked')){
        $inputb.attr("checked",false);
    }
});

Answer 2

解决:使用javascript并将单选按钮从单独的表单元素中取出。首先让我们看一下涉及到的JSP表单元素:

<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />
</form:form>
<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>

我在这里所做的只是将单选按钮从单独的表单中取出并将它们组合在一起…很明显;现在让我们看一下javascript文件。

    function goHere()
    {
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked) 
{
    submitForm('yesForm');
}
else if (noButton[0].checked)
{
    submitForm('noForm');
}
else 
{
    document.write(str.fontcolor.font("red"));
}
    }

可以看到，函数'goHere();'将根据用户在单选按钮上的选择，告诉下面代码中的提交按钮我们想要去哪里。这是我们的javascript函数在表单上的提交按钮中的调用…

    <div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle"  name="submitBtn"  onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>

就是这样! !简单地说;有时候，虽然学习新东西是无价的，但如果它没有坏掉——等等。希望这对以后的人有所帮助!