多個複選框來切換相關的div

我試着環顧其他非常類似的問題，但似乎沒有解決方案。多個複選框來切換相關的div

我將如何去實現以下情形：

佈局：

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"); 
    }); 
});

來源

2016-04-28 DavidPottrell

當然收音機將是一個更加適合這個場景？複選框意味着您可以一次選擇多個，並且可以顯示多個div。 –

重新審視範圍，我實際上認爲單選按鈕確實會更好。 – DavidPottrell

如果你添加一個小提琴 – SamGhatak

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

來源

2016-04-28 13:18:03

Bingo！這很好用！ – DavidPottrell

試試這個：我還沒有測試它。讓我知道是在其中的問題。 :)

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

    } 
}

來源

2016-04-28 13:00:19

多個複選框來切換相關的div

回答

相關問題