Checkbox is checked show button

Question

I want to show a Next button once my checkbox is checked. Below is my jquery code for the checkbox. Once the checkbox is checked the Next button should shows up and the Submit button should hide. If the checkbox is not checked, only the Submit button will be shown. I have created the code accordingly but i dont know why the program is not running as it should.

<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

And the problem with your HTML is type="nextstep" , there is no such input type. HTML assign default text type to it.

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

Change it to :

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

You need to toggle submit button along with the next element.

This should work for you.

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