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语句中只使用变量。我不完全确定你要用＆amp;＆amp ;.我怀疑你正试图设置两个输入的值。如果是这样，它们应该是单独的陈述。如果选中inputb，则没有理由将其设置为选中，因此我们可以删除该部分。

您可能希望在两个输入上触发此更改。

$("#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>

而已！！简单的说;有时，虽然它不值得学习新东西，如果它没有破坏 - 等等。希望这有助于某人以后下线！

jQuery单选按钮功能无法正常工作

2 个答案: