ラジオボタンのロードとチェック/アンチェックのデータを非表示にする

Question

チェックボックスの値がチェックされているかどうかをチェックするスクリプトを実行し、jQueryコードを非表示にして特定のチェック値。私はそれを修正することができません。チェックボックスがある場合：このコードをしようと

は

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

これは、私はこれは私の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> 

ある

チェックして、私は何をしようとしていることであるチェックボックスこれで私は本当与えます新規を選択すると、選択ボックスがロードされ、上記の場合は非表示になり、それ以外の場合はその逆になります。

また、jQueryコード内の最初の選択内容と、そのトリガーに基づいてチェックする必要があります。

Answer 1

以下のスニペットを確認してください。

これを達成するために、ラジオボタンの値を変更し、それに応じて表示/非表示を変更しました。

既存の顧客と新しい顧客の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>

Answer 2

クリックの代わりに$(".choosezoho").change()を使用し、$(this)を使用して、チェックされているかどうかを確認してください。

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

あなたのラジオ入力のそれぞれに固有のIDを与え、その後のdivに入れなければなりません。そうすれば、div全体を表示/非表示にすることができます。

変更イベントをCreate Newラジオ入力にバインドし、チェックボックスがオンになっている場合は、選択ボックスを表示してラジオフィールドを非表示にすることができます。

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

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

今では、このソリューションでは、以前のものとは大きく異なるものではない

Answer 6

を更新している、しかし、それはいくつかの小さな詳細を示し私にとって役に立つようです。このスイッチは、より多くのケースで広く使用され、事がより明確になります。

"入力タイプのテキスト"も "新規選択"オプションに表示する必要があることを理解しています。リストは他のケースに表示されます。右？

また、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>