Question

我有一个视图，其中有两个单选按钮，我想为每个单选按钮显示不同的按钮（类型提交）。

以下是为radiobuttons提供的Html

<input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" />
<input id="Isattending_1" name="Isattending" type="radio" value="No" />

这些是我的按钮

<input type="submit" id="yes" class="btn btn-primary" value="Next>>" />
<input type ="submit"id="no" class="btn btn-primary" value="Submit" />

这是我写的脚本，

<script>
    $(document).ready(function () {
        $(function defaultState() {
            $("#yes").show();
            $("#no").hide();
        })
        $('input:radio[name=Isattending]').change(function () {

            if ($("#Isattending_0").is(':checked')) {
                $("#yes").show();
                $("#no").hide();                                     
            }
            $('#Isattending_1').change(function () {

                if ($("#Isattending_0").is(':checked')) {
                    $("#no").show();
                    $("#yes").hide();                    
                }   
            })
        })

    })

</script>

但是现在，无论我点击哪个按钮，总是会显示Next>>按钮，或者另一方面，Submit按钮从不显示，无论我选择哪个单选按钮。

由于默认Isattending_0已被选中，因此我想显示下一个按钮，这就是为什么我defaultStatefunction。但是，选中Isattending_1后，我想要隐藏按钮Next>>并显示按钮Submit，我该怎么做？

Answer 1

为什么你需要2个提交，也许你可以只有一个并改变它的价值。

P.S。：对不起，我无法发表评论......

更新：

<input type="submit" id="submit" class="btn btn-primary" value="Submit" />

再次更新以确保选中单选按钮。

$(document).ready(function () {
     $('input:radio[name=Isattending]').change(function () {         
         if($(this).is(':checked')){
             if( $(this).val()=="Yes"){
                 $("#submit").val("Next>>");
             }
             else{
                 $("#submit").val("Submit");
             }        
         }   
     })
})

Answer 2

首先摆脱这一行：

$（'＃Isattending_1'）。change（function（）

因为已经为此radiobutton分配了更改功能。其次你应该有2个if语句 - 一个检查第一个radiobutton是否被检查，第二个检查是否检查了第二个radiobutton：

    $('input:radio[name=Isattending]').change(function () {

        if ($("#Isattending_0").is(':checked')) {
            $("#yes").show();
            $("#no").hide();                                     
        }
        else if ($("#Isattending_1").is(':checked')) {
            $("#no").show();
            $("#yes").hide();                    
        }   
    })

第三个：如果您只需要是/否（真/假），最好使用一个复选框，然后使用两个单选按钮。

Answer 3

试试这个：

 $(document).ready(function () {
    $(function defaultState() {
        $("#yes").show();
        $("#no").hide();
    })
    $('input:radio[name=Isattending]').change(function () {
        if ($('input[name=Isattending]:checked').attr('id') == "Isattending_0") {
            $("#yes").show();
            $("#no").hide();                                     
        } else {
                $("#no").show();
                $("#yes").hide();                    
            }   
    })

})

http://jsfiddle.net/CJRmk/27/

Answer 4

WORKING FIDDLE

$(document).ready(function () {
     $(function defaultState() {
         $("#yes").show();
         $("#no").hide();
     })
     $('input:radio[name=Isattending]').change(function () {         
         if ($("#Isattending_0").is(':checked')) {
             $("#yes").show();
             $("#no").hide();  
         }else {
             $("#yes").hide();
             $("#no").show();
         }            
     })
})

修改

正如您在评论中要求的那样，仅更改button text。这是一个工作示例FIDDLE

Yes :<input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> No :<input id="Isattending_1" name="Isattending" type="radio" value="No" /> <input type="submit" id="button" class="btn btn-primary" value="Next" /> $(document).ready(function () { $('input:radio[name=Isattending]').change(function () { if ($("#Isattending_0").is(':checked')) { $("#button").attr('value', 'Next'); }else { $("#button").attr('value', 'Submit'); } }) })

Answer 5

<script>
    $(document).ready(function () {
        $(function defaultState() {
            $("#yes").show();
            $("#no").hide();
        })
        $('input:radio[name=Isattending]').change(function () {

            if ($("#Isattending_0").is(':checked')) {
                $("#yes").show();
                $("#no").hide();
            }
            else {
                $("#no").show();
                $("#yes").hide();
            }
        })

    })
</script>

在单选按钮更改时，显示不同的按钮

5 个答案: