Check the radio button by clicking on the div, but the div does not appear

Question

I have a form with 3 options, 3 radio.

If option 1 is checked, Form1 appears and so on.

Each radio is inside a div, that is, if I click on the div, it checks the radio.

My problem is, if I click on the radio... the matching form appears, but if I click on the div, it checks the radio but does not appear the form.

My html and js are like this, below:

HTML

<form id=form>
<div id=conteiner>
 <input type=radio name=opcao value="A" id=form1>
</div>

<div id=conteiner>
 <input type=radio name=opcao value="B" id=form2>
</div>

<div id=conteiner>
 <input type=radio name=opcao value="C" id=form3>
</div>
</form>

<form action="form1.php" method=post id=A style="display:none;">
<input type=text>teste1
</form>

<form action="form2.php" method=post id=B style="display:none;">
<input type=text>teste2
</form>

<form action="form3.php" method=post id=C style="display:none;">
<input type=text>teste3
</form>

JS

$(document).ready(function(){
   $('#form-planos').change(function() {
    if ($('#form1').prop('checked')) {
        $('#A').show();
        $('#B').hide();
        $('#C').hide();
    } else {
        if ($('#form2').prop('checked')) {
        $('#B').show();
        $('#A').hide();
        $('#C').hide();
       } else {
        $('#A').hide();
        $('#B').hide();
        $('#C').show();
       }   
    }
   });
});

$("#conteiner").live("click",function(event) {
    var target = $(event.target);
    if (target.is('input:radio')) return;

    var checkbox = $(this).find("input[type='radio']");

    if( checkbox.attr("checked") == "" ){
       checkbox.attr("checked","true");
    } else {
       checkbox.attr("checked","");
    }
    $("div.assinatura").click(function () {

        $('input:radio').attr('checked',false);

    });   
});

$(function(){
    $('table').on('click', 'td', function(){
        $(this).parent().children().removeClass('active');
        $(this).addClass('active');
    });
});

Answer 1

The id of the form was only form, while the Javascript call was form-planos. Also, I think you should use classe in this case, instead of id.

And I’m not sure that’s what you need, but you can include a label within the div, hence the entire text of label will serve to select the radio and open the form.

I made a verifiable example from your code, using classe instead of id, see below on "Execute code snippet":

$(document).ready(function(){
            $('.form-planos').change(function() {
                if ($('#form1').prop('checked')) {
                    $('#A').show();
                    $('#B').hide();
                    $('#C').hide();
                } else {
                    if ($('#form2').prop('checked')) {
                        $('#B').show();
                        $('#A').hide();
                        $('#C').hide();
                    } else {
                        $('#A').hide();
                        $('#B').hide();
                        $('#C').show();
                    }
                }
            });
        });


        $(".conteiner").live("click",function(event) {
            var target = $(event.target);
            if (target.is('input:radio')) return;

            var checkbox = $(this).find("input[type='radio']");

            if( checkbox.attr("checked") == "" ){
                checkbox.attr("checked","true");
            } else {
                checkbox.attr("checked","");
            }
            $("div.assinatura").click(function () {

                $('input:radio').attr('checked',false);

            });
        });

        $(function(){
            $('table').on('click', 'td', function(){
                $(this).parent().children().removeClass('active');
                $(this).addClass('active');
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formss" class="form-planos">
    <div class="conteiner" id="1">
        <label id="formum">
        <input type="radio" name="opcao" value="A" id="form1">Label clicável</label>
    </div>

    <div class="conteiner" id="2">
        <label id="formum2">
        <input type="radio" name="opcao" value="B" id="form2">Label clicável</label>
    </div>

    <div class="conteiner" id="3">
        <label id="formum3">
        <input type="radio" name="opcao" value="C" id="form3">Label clicável</label>
    </div>
</form>
<br>

<form action="form1.php" method="post" id="A" style="display:none;">
    <input type="text">teste1
</form>

<form action="form2.php" method="post" id="B" style="display:none;">
    <input type="text">teste2
</form>

<form action="form3.php" method="post" id="C" style="display:none;">
    <input type="text">teste3
</form>

I hope it will be useful.