Jackson Jackson - 2 months ago 9
jQuery Question

show hide data on load and check/uncheck of radio buttons

Running a script where I need to check if the value of checkbox is checked or not, and then run the jQuery code for hide and doing a show based upon specific checked value. I am not able to fix it.

Trying with this code

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


This gives me true on which checkbox I check

This is my html

<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>


and what I am trying is: if the checkbox is choose new, it should load the select box and hide the above and vice versa in other case.

Also it should check what is the initial selection and based upon that trigger in the jQuery code.

Answer

Please check below snippet.

To achieve this I have changed the values of radio buttons to identify and show/hide accordingly.

And the existing and new customer HTML is wrapped with ids so we can make show/hide accordingly.

$(".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>