wake-up-neo.com

Zeigt div an, wenn das Optionsfeld ausgewählt ist

Ich bin ein Neuling in Javascript und jQuery . In meinem HTML-Code haben 2 Optionsfelder und ein Div. Ich möchte das div anzeigen, wenn ich das erste Optionsfeld ankreuze, ansonsten möchte ich, dass es ausgeblendet wird

also: Wenn das Optionsfeld # watch-me aktiviert ist -> div # show-me ist sichtbar . Wenn das Optionsfeld # watch-me nicht markiert ist (weder das Kontrollkästchen noch das zweite aktiviert ist) -> div #show -me ist versteckt.

Hier ist was ich bis jetzt habe.

 <form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
 </form>
 <div id='show-me' style='display:none'>Hello</div>

und JS:

 $(document).ready(function () { 
$("#watch-me").click(function() {
 $("#show-me:hidden").show('slow');
 });
 $("#watch-me").click(function(){
 if($('watch-me').prop('checked')===false) {
    $('#show-me').hide();}
    });
});

Wie kann ich mein Skript ändern, um das zu erreichen?

javascriptjqueryhtmlcssradio-button
21
user2886091

Ich würde es gerne so behandeln:

$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'watch-me') {
            $('#show-me').show();           
       }

       else {
            $('#show-me').hide();   
       }
   });
});
41
Eric J.

Eingabeelemente sollten Wertattribute haben. Fügen Sie sie hinzu und verwenden Sie diese:

$("input[name='test']").click(function () {
    $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});

jsFiddle-Beispiel

8
j08691
$('input[name=test]').click(function () {
    if (this.id == "watch-me") {
        $("#show-me").show('slow');
    } else {
        $("#show-me").hide('slow');
    }
});

http://jsfiddle.net/2SsAk/2/

5
Krishna
 $('input[type="radio"]').change(function(){
      if($("input[name='group']:checked")){
      $(div).show();
    }
  });
0
user2170505