javascript - 根据表单内的选择显示不同表单的单选按钮

Question

我不知道是我遗漏了一些小错误还是无法让它工作。

我有一个表单可以将数据发送到 email_to_us.php。在表格内我有两个单选按钮。它们位于此表格内，因为这是一项强制性数据，也会发送给我们。现在我想根据用户的选择更改表单。到目前为止我有这个:

HTML:

<form action="email_to_us.php" method="post">
    <span class="link_title">Prijavljam se na tečaj:</span><br><br>

    <select name="prijava_na_datum" required>
        <option value="" selected="selected">Izberi datum</option>;
        <?php 
        $con = mysqli_connect('localhost','root','','viverius_education');
        if (!$con) {
            die('Could not connect: ' . mysqli_error($con));
        }
        $sql = mysqli_query($con, "SELECT ID_TECAJA, DATUM FROM razpisani_tecaji WHERE STATUS ='odprt' AND ST_ODPRTIH_MEST>0");
        while ($row = $sql->fetch_assoc()){
            echo "<option value='" . $row['ID_TECAJA'] . "'>" . $row['DATUM'] . "</option>";
        }
        ?>
    </select>

    <br>

    <input type="radio" id="radio1" name="status_osebe" value="fizicna" required> Fizična oseba   
    <input type="radio" id="radio2" name="status_osebe" value="pravna"> Pravna oseba<br><br>
    <form method ="post" id="fizicna_oseba">
        <input class="span7" type="text" name="ime" value="" placeholder="Ime" required/>
        <input class="span7" type="text" name="priimek" value="" placeholder="Priimek" required />
        <input class="span7" type="email" name="email" value="" placeholder="Email" required/>
        <input class="span7" type="text" name="telefon" value="" placeholder="Telefonska številka (podatek ni obvezen)"/><br>
        Vaša izobrazba/status<br>
        <select  name="izobrazba" required>
            <option></option>
            <option value="student">Študent</option>
            <option value="pripravnik">Pripravnik</option>
            <option value="specializant">Specializant</option>
            <option value="specialist">Specialist</option>
        </select>
        <input class="span7" type="text" name="kraj" value="" placeholder="Ustanova/kraj (podatek ni obvezen)"/><br>
    </form>
    <form method ="post" id="podjetje">
        <input class="span7" type="text" name="ime" value="" placeholder="Ime" required/>
        <input class="span7" type="text" name="priimek" value="" placeholder="Priimek" required />
        <input class="span7" type="email" name="email" value="" placeholder="Email" required/>
        <input class="span7" type="text" name="telefon" value="" placeholder="Telefonska številka (podatek ni obvezen)"/><br>
        Izberite koliko oseb želite prijaviti na tečaj? Odprla se vam bodo dodatna okna kjer prosimo, da izpolnete podatke o udeležencih.<br>
        <input type="radio" id="radio01" name="st_oseb" value="fizicna" required>1   
        <input type="radio" id="radio02" name="st_oseb" value="pravna">2
        <input type="radio" id="radio03" name="st_oseb" value="fizicna" required>3  
        <input type="radio" id="radio04" name="st_oseb" value="pravna">4
        <input type="radio" id="radio05" name="st_oseb" value="pravna">5<br><br>
        Vaša izobrazba/status<br>
        <select  name="izobrazba" required>
            <option></option>
            <option value="student">Študent</option>
            <option value="pripravnik">Pripravnik</option>
            <option value="specializant">Specializant</option>
            <option value="specialist">Specialist</option>
        </select>
        <input class="span7" type="text" name="kraj" value="" placeholder="Ustanova/kraj (podatek ni obvezen)"/><br>
    </form>

    <input type="checkbox" name="register" value="register"> Ob prijavi me tudi registriraj!
    <a href="#">Kaj pridobim z registracijo?</a><br><br>
    <input type="submit" class="btn send_btn" value="Pošlji" />
    <div class="clear"></div><br>
</form>

Java脚本:

<script type="text/javascript"> 
$('#radio1').change(function() {
    if(this.checked) {
        $('#fizicna_oseba').show();
        $('#podjetje').hide();
    }
});
$('#radio2').change(function() {
    if(this.checked) {
        $('#podjetje').show();
        $('#fizicna_oseba').hide();
    }
});
</script>

Answer 1

更简单、更简洁的方法是使用类名

<input ... class="rButton">
<input ... class="rButton">

脚本

​$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'fizician_ca' :
            // do something on this value
            break;
        case 'etc' :
            // do something with this value
            break;
    }            
});​