Verwenden von Optionsfeldern zum Anzeigen von Inhalten mit Jquery

Question

Der Zweck ist, dass beim Auswählen des Optionsfelds Text im Platzhalter-div angezeigt wird. Problem ist mein Jquery-Code ist schlecht, und weiß nicht, was ich wirklich mache.

html

<div> 
<form> 
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here 
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button 
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button 
</form> 
</div> 

<div class="placeholder"> 
</div> 

JQuery

$(document).ready(function(e) { 

    $('.menu').click(function() { 
     if ("#one").checked { 
      $('.placeholder').html('<h3>Testing</h3>'); 
     }if ("#two").checked { 
      $('.placeholder').html('<h3>Testing Testing</h3>'); 
     }if ("#three").checked { 
      $('.placeholder').html('<h3>Testing Testing Testing</h3>'); 
     } 
    }); 

}); 

Hinweis: Wenn ich überprüfe alle drei Radio-Buttons auf einmal, ich bin zu wollen alle drei Nachrichten bis kommen. Ich bemerke in JSfiddle, dass ich immer nur auf einen Radio-Button klicken kann. Wenn ich auf einen anderen klicke, wird die vorherige Schaltfläche deaktiviert. Ich verwende einen ähnlichen Code auf der Webseite, an dem ich gerade arbeite, und es erlaubt mir, so viele wie ich möchte zu überprüfen. Begründung dafür?

Webseite Im Arbeits Radio-Buttons auf der Verwendung - http://bitlamp.wctc.edu/~kschmelzer/js2/LLC/

ich habe ich versucht haben Optionen geprüft werden, durch drei verschiedene „Seiten“ (beachten Sie, wenn die Site nicht geladen, die „Seiten“ sind lediglich divs Wenn Sie auf der nächsten Seite mit der nächsten Taste und dann auf der letzten vierten Seite angezeigt werden, wird der Inhalt (der Text) der ausgewählten Optionsfelder angezeigt.

Vielen Dank für Ihre Hilfe!

Answer 1

Es gibt einige sintax Fehler, siehe da: http://codepen.io/FuckingLunatic/pen/grvZyd

$('.menu').click(function() { 
     if ($("#one").is(":checked")) { 
      $('.placeholder').html('<h3>Testing</h3>'); 
     }if ($("#two").is(":checked")) { 
      $('.placeholder').html('<h3>Testing Testing</h3>'); 
     }if ($("#three").is(":checked")) { 
      $('.placeholder').html('<h3>Testing Testing Testing</h3>'); 
     } 
    }); 

Answer 2

die aktualisierte Version des Codes hinzugefügt, überprüfen Sie es

$('input:radio[name=option]').click(function() { 
 
    $('.placeholder').html(); 
 
     if ($(this).val() == 'first') { 
 
      $('.placeholder').html('<h3>Testing</h3>'); 
 
     }if ($(this).val() == 'second') { 
 
      $('.placeholder').html('<h3>Testing Testing</h3>'); 
 
     }if ($(this).val() == 'third') { 
 
      $('.placeholder').html('<h3>Testing Testing Testing</h3>'); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<form> 
 
<input id="one" class="menu" type="radio" name="option" value="first">Radio Button here 
 
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button 
 
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button 
 
</form> 
 
</div> 
 
<div class="placeholder"> 
 
</div>

Answer 3

Dies ist meine Lösung:

$(document).ready(function(e) { 
 

 
    $('.menu').click(function() { 
 
     var text = ''; 
 
     switch(this.id) { 
 
     case 'one': text = 'Selected: one'; 
 
     break; 
 
     case 'two': text = 'Selected: two'; 
 
     break; 
 
     case 'three': text = 'Selected: three'; 
 
     break; 
 
     } 
 
     $('.placeholder').html(text); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<form> 
 
    <div> 
 
    <input id="one" class="menu" type="radio" name="option" value="first">Radio Button here 
 
    </div> 
 
    <div> 
 
<input id="two" class="menu" type="radio" name="option" value="second">Another Radio button 
 
    </div> 
 
    <div> 
 
<input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button 
 
    </div> 
 
</form> 
 
</div> 
 

 
<div class="placeholder"> 
 
</div>

Answer 4

Versuchen Sie dieses

$(document).ready(function(e) { 
 

 
    $('#one, #two, #three').change(function(event) { 
 
    var value = $(this).val(); 
 
    if (value == 'first') { 
 
     $('.placeholder').html('<h3>Testing</h3>'); 
 
    } else if (value == 'second') { 
 
     $('.placeholder').html('<h3>Testing Testing</h3>'); 
 
    } else if (value == 'third') { 
 
     $('.placeholder').html('<h3>Testing Testing Testing</h3>'); 
 
    } 
 
    }) 
 

 

 
});

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <form> 
 
     <input id="one" class="menu" type="radio" name="option" value="first">Radio Button here 
 
     <input id="two" class="menu" type="radio" name="option" value="second">Another Radio button 
 
     <input id="three" class="menu" type="radio" name="option" value="third">Yet another radio button 
 
    </form> 
 
    </div> 
 

 
    <div class="placeholder"> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 5

Erste aller Optionsfelder lassen Benutzer eine von einer begrenzten Anzahl von Optionen wählen, wenn Sie eine multi- erstellen möchten Wählen Sie das Feld, das Sie verwenden möchten

<input type="checkbox" /> 

Optionsfelder werden basierend auf ihrem Namensfeld als Gruppe behandelt. Sie können also eine Umgehungslösung verwenden und für jede der Optionen eindeutige Namen verwenden. Dies ist jedoch definitiv ein Beispiel für eine schlechte Vorgehensweise.

Wie für den Code

if (one.checked) { 
    $('.placeholder').html('<h3>Testing</h3>'); 
} 
if ($("#two").prop('checked')) { 
    $('.placeholder').html('<h3>Testing Testing</h3>'); 
} 
if ($("#three").is(':checked')) { 
    $('.placeholder').html('<h3>Testing Testing Testing</h3>'); 
} 

Sie Kontrolle durchführen können, wenn der Eingang aktiviert ist entweder geprüft Eigenschaft mit oder über jQuery ist (aktiviert) oder Prop

Sie finden hier Version arbeiten: https://jsfiddle.net/pcor7khq/1/

Answer 6

Zuerst, um Radio-Button-Verhalten zu beheben, müssen Sie sie alle in einem <FORM> Tag mit dem gleichen Namen setzen.

Zweitens brauchen Sie hier wahrscheinlich überhaupt keine jQuery. CSS-Selektor Verwenden Sie einfach

input:checked ~ .message{display: block} 

Siehe mein Beispiel hier https://jsfiddle.net/sewy1w71/

Answer 7

Es wäre einfacher, wenn Sie das Kontrollkästchen statt Radiobutton wählen .. Ich denke, der folgende Code wird die Ausgabe führt .. versuchen sie es

<form id="group2"> 
<input id="1" class="menu" type="radio" value="first">Radio Button here 
<input id="2" class="menu" type="radio" value="second">Another Radio button 
<input id="3" class="menu" type="radio" value="third">Yet another radio button 
</form> 

<div class="placeholder"> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(e) { 
    var marray = []; 
    $('.menu').click(function() {  
     if ($("#1").is(":checked")){ 
      var found = jQuery.inArray('1', marray); 
      if (found < 0) 
      marray.push('1'); 
     } 

     if ($("#2").is(":checked")){ 
      var found = jQuery.inArray('2', marray); 
      if (found < 0) 
      marray.push('2'); 
     }   

     if ($("#3").is(":checked")){ 
      var found = jQuery.inArray('3', marray); 
      if (found < 0) 
      marray.push('3'); 
     } 

     var a = marray.sort().toString(); 
     switch(a) 
     { 
      case '1'  : $('.placeholder').html('<h3>Testing</h3>'); 
          break; 
      case '2'  : $('.placeholder').html('<h3>Testing Testing</h3>'); 
          break; 
      case '3'  : $('.placeholder').html('<h3>Testing Testing Testing</h3>'); 
          break;    
      case '1,2' : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing</h3>'); 
          break; 
      case '1,3' : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing Testing</h3>'); 
          break; 
      case '2,3' : $('.placeholder').html('<h3>Testing Testing</h3><h3>Testing Testing Testing</h3>'); 
          break; 
      case '1,2,3' : $('.placeholder').html('<h3>Testing</h3><h3>Testing Testing</h3><h3>Testing Testing Testing</h3>'); 
          break; 
      default  : $('.placeholder').html(''); 
          break;             

     }   
    }); 

}); 

function remitem(arr, value) { 
    var b = ''; 
    for (b in arr) { 
     if (arr[b] === value) { 
      arr.splice(b, 1); 
      break; 
     } 
    } 
    return arr; 
} 
</script> 

Kontrolle der Geige .. https://jsfiddle.net/rcvk9Ldw/