zeigen Daten beim Laden verbergen und aktivieren/deaktivieren Optionsschaltflächen

Question

Ausführen eines Skripts, wo ich prüfen muss, ob der Wert des Kontrollkästchens aktiviert ist oder nicht, und dann den jQuery-Code zum Ausblenden und Ausführen einer Show auf der Grundlage bestimmter überprüfter Werte ausführen . Ich kann das nicht beheben.

mit diesem Code Versuch

$(".choosezoho").click(function() { 
    var checkValue = $("input[type='radio']").is(':checked'); 
     alert(checkValue); 
}); 

Das gibt mir wahr auf die Checkbox Ich überprüfe

Das ist mein html ist

<div class="selectbox_radio"> 
<blockquote> 
    <div title="128167215">Training</div> 
    <input type="hidden" name="customer_name" id="customer_name" value="12817215~Training"> 
</blockquote> 
<input type="radio" class="choosezoho" name="usethisexisting" checked value="12817215">Use Existing 
<input type="radio" class="choosezoho" name="usethisexisting" value="12817215">Create New 

<br/> 
<small>If You Check "Choose New" Please Choose a New Contact from below List</small> 
<br/> 
</div> 
<div class="selectbox" style="display:none;"> 
<select name="customer_name" id="customer_name_select" class="selectItemsLists"> 
     <option></option> 
</select> 
</div> 

und was ich versuche, ist: Wenn das Kontrollkästchen ist Wählen Sie neu, es sollte die Auswahlbox laden und die oben genannten ausblenden und umgekehrt.

Auch sollte es überprüfen, was ist die erste Auswahl und basierend auf diesem Trigger im jQuery-Code.

Answer 1

Bitte überprüfen Sie das folgende Snippet.

Um dies zu erreichen, habe ich die Werte der Optionsfelder geändert, um sie zu identifizieren und entsprechend ein-/auszublenden.

Und der bestehende und neue Kunde HTML ist mit IDs verpackt, so dass wir entsprechend zeigen/verbergen können.

$(".choosezoho").on('change',function() { 
 
    var checkValue = $('input[name=usethisexisting]:checked').val() 
 
    if(checkValue=="new"){ 
 
    $("#existingCustomer").hide(); 
 
    $("#newCustomer").show(); 
 
    }else{ 
 
    $("#existingCustomer").show(); 
 
    $("#newCustomer").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="selectbox_radio"> 
 
    <blockquote id="existingCustomer"> 
 
    <div title="128167215">Training</div> 
 
    <input type="hidden" name="customer_name" id="customer_name" value="12817215~Training"> 
 
    </blockquote> 
 
    <input type="radio" class="choosezoho" name="usethisexisting" checked value="existing">Use Existing 
 
    <input type="radio" class="choosezoho" name="usethisexisting" value="new">Create New 
 

 
    <br/> 
 
    <div id="newCustomer" style='display:none;'> 
 
    <small>If You Check "Choose New" Please Choose a New Contact from below List</small> 
 
    <br/> 
 
    </div> 
 
    <div class="selectbox" style="display:none;"> 
 
    <select name="customer_name" id="customer_name_select" class="selectItemsLists"> 
 
     <option></option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie, $(".choosezoho").change() anstelle von Klick zu verwenden und $(this) verwenden, um zu sehen, ob es überprüft wird.

Answer 3

$(".choosezoho").on('change',function() { 
 
    var checkValue = $('input[name=usethisexisting]:checked').val() 
 
    if(checkValue=="new"){ 
 
    $("#existingCustomer").hide(); 
 
    $("#newCustomer").show(); 
 
    $('.selectbox').show(); 
 
    }else{ 
 
    $("#existingCustomer").show(); 
 
    $("#newCustomer").hide(); 
 
    $('.selectbox').hide(); 
 
    } 
 
});

<div class="selectbox_radio"> 
 
    <blockquote id="existingCustomer"> 
 
    <div title="128167215">Training</div> 
 
    <input type="hidden" name="customer_name" id="customer_name" value="12817215~Training"> 
 
    </blockquote> 
 
    <input type="radio" class="choosezoho" name="usethisexisting" checked value="existing">Use Existing 
 
    <input type="radio" class="choosezoho" name="usethisexisting" value="new">Create New 
 

 
    <br/> 
 
    <div id="newCustomer" style='display:none;'> 
 
    <small>If You Check "Choose New" Please Choose a New Contact from below List</small> 
 
    <br/> 
 
    </div> 
 
    <div class="selectbox" style="display:none;"> 
 
    <select name="customer_name" id="customer_name_select" class="selectItemsLists"> 
 
     <option></option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 4

Sie sollten jede Ihrer Radio geben eine eindeutige ID eingibt, und sie dann in einem div setzen. Auf diese Weise können Sie das gesamte div anzeigen/ausblenden.

Dann können Sie ein Änderungsereignis an die Radio erstellen -Eingabe binden und sehen, ob es aktiviert ist, wenn dies der Fall ist, können Sie das Auswahlfeld anzeigen und die Funkfelder ausblenden.

$("#createNewID").bind("change",function() { 
    if($(this).is(':checked')){ 
      $('.selectbox').show(); 
      $('#radioInput').hide(); 
} 

See JFiddle: https://jsfiddle.net/1h2xaL5x/

Answer 5

$(".choosezoho").on('change',function() { 
 
    var checkValue = $('input[name=usethisexisting]:checked').val() 
 
    if(checkValue=="new"){ 
 
    $("#existingCustomer").hide(); 
 
    $("#newCustomer").show(); 
 
    $('.selectbox').show(); 
 
    }else{ 
 
    $("#existingCustomer").show(); 
 
    $("#newCustomer").hide(); 
 
    $('.selectbox').hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="selectbox_radio"> 
 
    <blockquote id="existingCustomer"> 
 
    <div title="128167215">Training</div> 
 
    <input type="hidden" name="customer_name" id="customer_name" value="12817215~Training"> 
 
    </blockquote> 
 
    <input type="radio" class="choosezoho" name="usethisexisting" checked value="existing">Use Existing 
 
    <input type="radio" class="choosezoho" name="usethisexisting" value="new">Create New 
 

 
    <br/> 
 
    <div id="newCustomer" style='display:none;'> 
 
    <small>If You Check "Choose New" Please Choose a New Contact from below List</small> 
 
    <br/> 
 
    </div> 
 
    <div class="selectbox" style="display:none;"> 
 
    <select name="customer_name" id="customer_name_select" class="selectItemsLists"> 
 
     <option></option> 
 
    </select> 
 
    </div> 
 
</div>

Nun ist es

aktualisiert

Answer 6

Diese Lösung ist nicht sehr verschieden von früheren, aber es zeigt einige kleine Details, scheint mir nützlich zu sein. Der Switch ermöglicht eine breite Nutzung für mehr Fälle und macht die Dinge klarer.

Ich verstehe, dass die "Eingabe Text" muss auch in der "Wählen Sie neu" Option angezeigt werden, die Liste erscheint im anderen Fall. Recht?

Es gibt auch kleinere Änderungen in HTML.

 $(".choosezoho").bind("change",function() { 
 
      if($(this).is(':checked')){ 
 
       switch($(this).attr('id')) { 
 
        case "createNew": 
 
         $('#nameSelect1').hide(); 
 
         $('#newCustomerDiv').show(); 
 
         break; 
 
        case "useExisting": 
 
         $('#nameSelect1').show(); 
 
         $('#newCustomerDiv').hide(); 
 
         break; 
 
       } 
 
      } 
 
     }); 
 

 
    //setDefault 
 
    $('#useExisting').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="selectbox_radio" > 
 
     <blockquote> 
 
     <div title="128167215" 
 
      id="trainingID"> 
 
      Training 
 
     </div> 
 
     <div id="newCustomerDiv"> 
 
     <label for="customerName">New customer name:</label> 
 
     <input type="input" 
 
       id="customerName" 
 
       name="customer_name" 
 
       id="customer_name" 
 
       value="12817215~Training"> 
 
     </div> 
 
     </blockquote> 
 
     <input type="radio" 
 
      id = "useExisting" 
 
      class="choosezoho" 
 
      name="usethisexisting" 
 
      checked value="12817215"> 
 
     Use Existing 
 
     <input type="radio" 
 
      id="createNew" 
 
      class="choosezoho" 
 
      name="usethisexisting" 
 
      value="12817215"> 
 
     Create New 
 
     <br/> 
 
     <small>If You Check "Choose New" Please Choose a New 
 
     Contact from below List</small> 
 
     <br/> 
 
    </div> 
 
    <div id="nameSelect1" class="selectbox" style="display:none;"> 
 
     <select name="customer_name" id="customer_name_select" 
 
       class="selectItemsLists"> 
 
     <option value="John Doe">John Doe</option> 
 
     <option value="Jane Doe">Jane Doe</option> 
 
     </select> 
 
    </div>