Question

我想在选中复选框后显示“下一步”按钮。下面是我的jquery代码的复选框。选中复选框后，将显示“下一步”按钮，并且“提交”按钮应隐藏。如果未选中该复选框，则仅显示“提交”按钮。我已经相应地创建了代码，但我不知道为什么程序没有按预期运行。

<input type="checkbox" name="checkrecc" ><label>Check this</label>
<script type="text/javascript">
    $(document).ready(function() {

     var $submit = $("#indrecc").hide(),
     $cbs = $('input[name="checkrecc"]').click(function() {
     $submit.toggle( $cbs.is(":checked") );
     });

     });
</script>
<br>
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
<input type="submit" name="indsubmit" value="Submit" class="btn btn-info btn-block" style="margin-bottom: 5px;">

Answer 1

HTML的问题是type="nextstep"，没有这样的输入类型。 HTML为其指定了默认的text类型。

<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
         //^ type="button"

将其更改为：

<input type="button" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">

您需要切换提交按钮以及next元素。

这应该适合你。

$(document).ready(function () {

    var $submit = $("#indrecc").hide(),
        $cbs = $('input[name="checkrecc"]').click(function () {
            $submit.toggle($cbs.is(":checked"));
            $('[name=indsubmit]').toggle(!$cbs.is(":checked"));
        });

});

<强> DEMO

复选框已选中显示按钮

1 个答案: