复选框已选中显示按钮

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