関連するdivを切り替える複数のチェックボックス

Question

私は他の非常によく似た質問を見ようとしましたが、解決策がないようです。

どのように私は次のシナリオを達成することについては行くだろう：

レイアウト：

Checkbox 1 "Orange" 
Checkbox 2 "Apple" 
Checkbox 3 "Banana" 

Div 1 "Orange" 
Div 2 "Apple" 
Div 3 "Banana" 

ページをロードすると、あなたが見ることができるすべてはチェックボックスです。ユーザがチェックボックスを選択すると、対応するdivが表示されます。ユーザーが別のチェックボックスを選択すると、元のdivが非表示になり、新しく選択されたdivが表示されます。

チェックボックスは、別の目的で使用することができるので、チェックボックスは必要なオプションです。

これまでの私のコード：

$(document).ready(function() { 
    $('.toggle input[type="checkbox"]').on('change', function() { 
     $('input[type="checkbox"]').not(this).prop('checked', false).change(); 
     var name = $(this).attr('name'); 
     if ($(this).attr("type") === "checkbox") { 
      $(this).parent().siblings().removeClass("selected"); 
      $("#" + name).toggle(this.checked); 
     } 
     $(this).parent().toggleClass("selected"); 
    }); 
}); 

Answer 1

$(document).ready(function() 
{ var temp_id = ''; 
    $('input[type="radio"]').change(function(){ 
     var div_id = $(this).val(); 

     if(temp_id == '') temp_id = div_id; 
     else 
     { 
      $('#' + temp_id).hide(); 
      temp_id = div_id; 
     } 

     $('#' + div_id).show(); 

    }); 
}); 

---

<input type="radio" name="rd" value="orange">Orange 
<input type="radio" name="rd" value="apple">Apple 
<input type="radio" name="rd" value="banana">Banana 

Answer 2

はこれを試してみてください。 私はそれをテストしていません。私が知っているのは、その中に問題があることです。 :)

jQuery(document).ready(function() 
{ 
    jQuery('.toggle input[type="checkbox"]').change(function(e){ 
     e.preventDefault(); 
     jQuery('.toggle input[type="checkbox"]').prop("checked","false"); 
     jQuery(this).prop("checked","true"); 

     jQuery(".toggle div").hide(); 
     var div_index = jQuery(this).index(); 
     jQuery(".toggle div:eq("+div_index+")").show(); 

    } 
}