復選框已選中顯示按鈕

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