用于切换相关内容的多个复选框 div

Question

我尝试查看其他非常相似的问题，但 none 似乎有解决方案。

我将如何实现以下场景：

布局：

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

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

加载页面时，您只能看到复选框。当用户选中复选框时，会显示相应的 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

试试这个：我没有测试过。让我知道它有问题。 :)

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();

    }
}

Answer 2

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

用于切换相关内容的多个复选框 div

Multiple checkboxes to toggle related div

checkbox

jquery

toggle