ラジオボタンの選択時にdivsを表示/非表示にする

Question

ラジオボタンを選択した後にdata-target属性で定義されたdivを表示するこのコードがありますが、必要なのはそれです私が選択肢を変更することを選択すると、他の部門は消える必要があります。私は多くのことを試みましたが、それらのどれも働いていませんでした...ありがとうございました

ラジオをクリックするとAno1 - div f4が表示され、q2が消えます 私はラジオをクリックして数Ne1 - .. DIV f4が消え、Q2が表示されます。..

をそして、それは（あなたが見ることができるように）別のdivに同じ道を行く

$(document).ready(function() { 
 
    $('[data-target]').click(function() { 
 
    // $('.none').hide(); 
 
    if ($(this).is(':hover')) { 
 
     var target = $(this).attr('data-target'); 
 
     $(target).show(1000); 
 

 
    } 
 
    }); 
 
}); 
 

 
// `$('.none').hide();` is in comment because I want to see the choices..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="q1" class="none"> 
 

 
    <h3>Žádáte o nové číslo?</h3> 
 
    <input type="radio" name="novecislo" value="Ano1" id="Ano1"><label for="Ano1" data-target="#f4">Ano</label> <br> 
 
    <input type="radio" name="novecislo" value="Ne1" id="Ne1"><label for="Ne1" data-target="#q2">Ne</label> 
 

 
</div> 
 
<div id="q2" class="none"> 
 

 
    <h3>Chcete převést číslo v rámci operátora T-mobile?</h3> 
 
    <input type="radio" name="op" id="Ano2"><label for="Ano2" data-target="#q3">Ano</label> <br> 
 
    <input type="radio" name="op" id="Ne2"><label for="Ne2" data-target="#f1,#f4">Ne</label> <br> 
 

 

 
</div> 
 
<div id="f4" class="none"> 
 
    <h4>Jaký tarif chcete zvolit?</h4> 
 
    <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1" title="15Kč | bez dat | volání a sms 0,29/min">Profi na míru 1</label> <br> 
 
    <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2" title="190Kč | 1,5GB | volání a sms zdarma">Profi na míru 2</label> <br> 
 
    <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3" title="229Kč | 5GB | volání a sms zdarma">Profi na míru 3</label> <br> 
 
    <input type="radio" name="tarif" value="tarif5" id="t5"><label for="t5" title="149Kč | bez dat | volání a sms zdarma">Profi na míru 5</label> <br> 
 
    <h4>Co chcete aktivovat?</h4> 
 
    <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br> 
 
    <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label> 
 
    <p></p> 
 

 
    <input type="button" name="send" value="ODESLAT" onclick="vypisForm();"> 
 

 
</div>

Answer 1

は、すべてのこの1

$(document).ready(function() { 
 
    $("input:radio[name='novecislo']").change(function() { 
 
    var val = $(this).val(); 
 
    if (val == 'Ano1') { 
 
     $('#f4').show(); 
 
     $('#q2').hide(); 
 
    } else { 
 
     $('#f4').hide(); 
 
     $('#q2').show(); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="q1" class="none"> 
 

 
    <h3>Žádáte o nové číslo?</h3> 
 
    <input type="radio" name="novecislo" value="Ano1" id="Ano1"><label for="Ano1" data-target="#f4">Ano</label> <br> 
 
    <input type="radio" name="novecislo" value="Ne1" id="Ne1"><label for="Ne1" data-target="#q2">Ne</label> 
 

 
</div> 
 
<div id="q2" class="none"> 
 

 
    <h3>Chcete převést číslo v rámci operátora T-mobile?</h3> 
 
    <input type="radio" name="op" id="Ano2"><label for="Ano2" data-target="#q3">Ano</label> <br> 
 
    <input type="radio" name="op" id="Ne2"><label for="Ne2" data-target="#f1,#f4">Ne</label> <br> 
 

 

 
</div> 
 
<div id="f4" class="none"> 
 
    <h4>Jaký tarif chcete zvolit?</h4> 
 
    <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1" title="15Kč | bez dat | volání a sms 0,29/min">Profi na míru 1</label> <br> 
 
    <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2" title="190Kč | 1,5GB | volání a sms zdarma">Profi na míru 2</label> <br> 
 
    <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3" title="229Kč | 5GB | volání a sms zdarma">Profi na míru 3</label> <br> 
 
    <input type="radio" name="tarif" value="tarif5" id="t5"><label for="t5" title="149Kč | bez dat | volání a sms zdarma">Profi na míru 5</label> <br> 
 
    <h4>Co chcete aktivovat?</h4> 
 
    <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br> 
 
    <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label> 
 
    <p></p> 
 

 
    <input type="button" name="send" value="ODESLAT" onclick="vypisForm();"> 
 

 
</div>

Answer 2

あなたは1つの簡単なトリックを行うことができます：あなたが目に見えるいずれかを行う前に、クラスnoneを持つすべてのdivを非表示にします。このように：

$(document).ready(function() { 
    $('[data-target]').click(function() { 
    // $('.none').hide(); 
    if ($(this).is(':hover')) { 
     $('.none').hide(); 
     var target = $(this).attr('data-target'); 
     $(target).show(1000); 

    } 
    }); 
}); 

Answer 3

ファーストを試してみてください：.on('click', function(){})を使用する代わりに、ここで.click()

が理由です：Difference between .on('click') vs .click()

Answer 4

移動は番目ラジオも に電子データ-target属性あなたは

$(function() { 
 
    $('[data-target]').on("click", function() { 
 
    var target = $(this).attr('data-target'); 
 
    console.log(target) 
 
    $(target).show(1000); 
 
    }); 
 
});

#f4 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="q1" class="none"> 
 

 
    <h3>Žádáte o nové číslo?</h3> 
 
    <input type="radio" name="novecislo" value="Ano1" data-target="#f4" id="Ano1"><label for="Ano1">Ano</label> <br> 
 
    <input type="radio" name="novecislo" value="Ne1" data-target="#q2" id="Ne1"><label for="Ne1">Ne</label> 
 

 
</div> 
 
<div id="q2" class="none"> 
 

 
    <h3>Chcete převést číslo v rámci operátora T-mobile?</h3> 
 
    <input type="radio" name="op" data-target="#q3" id="Ano2"><label for="Ano2">Ano</label> <br> 
 
    <input type="radio" name="op" data-target="#f1,#f4" id="Ne2"><label for="Ne2">Ne</label> <br> 
 

 

 
</div> 
 
<div id="f4" class="none"> 
 
    <h4>Jaký tarif chcete zvolit?</h4> 
 
    <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1" title="15Kč | bez dat | volání a sms 0,29/min">Profi na míru 1</label> <br> 
 
    <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2" title="190Kč | 1,5GB | volání a sms zdarma">Profi na míru 2</label> <br> 
 
    <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3" title="229Kč | 5GB | volání a sms zdarma">Profi na míru 3</label> <br> 
 
    <input type="radio" name="tarif" value="tarif5" id="t5"><label for="t5" title="149Kč | bez dat | volání a sms zdarma">Profi na míru 5</label> <br> 
 
    <h4>Co chcete aktivovat?</h4> 
 
    <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br> 
 
    <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label> 
 
    <p></p> 
 

 
    <input type="button" name="send" value="ODESLAT" onclick="vypisForm();"> 
 

 
</div>