显示隐藏数据加载和复选/取消单选按钮

尝试使用$(".choosezoho").change()代替点击，然后使用$(this)查看是否被选中

请查看下面的代码片段。

为了实现这一点，我已经改变了单选按钮的值来识别和显示/隐藏相应的

现有的和新的客户HTML被id包裹，所以我们可以相应地显示/隐藏。

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

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

你应该给你的每个单选输入一个唯一的id，然后把它们放在一个div中。这样你就可以显示/隐藏整个div。

然后，您可以将更改事件绑定到Create New单选输入，并查看它是否被选中，如果是，您可以显示选择框并隐藏单选字段。

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

参见JFiddle: https://jsfiddle.net/1h2xaL5x/

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

现在它被更新了

这个解决方案与以前的解决方案没有太大的不同，但是，它显示了一些小细节，对我来说似乎很有用。该开关允许在更多情况下广泛使用，并使事情更清晰。

我理解"输入类型文本"也必须在"选择新"选项中显示，在其他情况下出现列表。对吧?

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>