如何可以使用jquery和/或bootstrap爲多個選項創建可切換的div？

Question

我想製作一個漂亮的多選HTML頁面。我希望有3或4個<div>包括圖像和/或文本，用戶應該能夠通過簡單地點擊<div>上的任何位置來切換每個<div>「開」或「關」（應該有突出顯示效果，如果可能的話一個動畫）。提交表單時，服務器應發送每個<div>的狀態，就好像它是一個複選框。

我已經搜遍遍地，但找不到那樣的東西。這似乎很基本，我可能忽略了一些微不足道的東西。有任何想法嗎？我已經使用jQuery和bootstrap，所以如果只有一個基於這些框架的簡單解決方案，我會非常高興。

謝謝。我不希望<div> s移動或消失。我只想要一個「突出顯示」效果，例如當選擇<div>時將背景顏色更改爲藍色，並在未選中時將其改回白色。

Answer 1

我會建議開始具有良好的HTML基礎。我可能會在每個div中使用一個隱藏的單選按鈕，並在單擊div時檢查或取消選中它。單選按鈕將是提交選定值的表單上的有效項目。

HTML：

<div class="choice"> 
    <input id="choice_1" type="radio" name="choice" value="choice_1" /> 
    <label for="choice_1">Chicago</label> 
</div> 

<div class="choice"> 
    <input id="choice_2" type="radio" name="choice" value="choice_2" /> 
    <label for="choice_2">Los Angeles</label> 
</div> 


<div class="choice">  
    <input id="choice_3" type="radio" name="choice" value="choice_3" /> 
    <label for="choice_3">San Francisco</label> 
</div> 

的JavaScript：

$(document).ready(function() { 
    var choices = $('.choice'); 

    choices.on('click', function(event) { 
     var choice = $(event.target); 
     choice 
      .find('[name="choice"]') 
      .prop('checked', true) 
      .trigger('change'); 
    }); 

    var inputs = $('.choice input'); 
    inputs.on('change', function(event) { 
     var input = $(event.target); 
     var choice = $(this).closest('.choice'); 

     $('.choice.active').removeClass('active'); 
     choice.addClass('active'); 
    }); 
});​ 

演示：jsfiddle

另一種方法：如果你想多一次

與單選按鈕僅在一個

所以選擇單選按鈕組一次處於活動狀態。如果這不是您想要的行爲，您可以使用隱藏的複選框並將其打開和關閉。

HTML：

<div class="choice"> 
    <input id="choice_1" type="checkbox" name="choice_1" value="choice_1" /> 
    <label for="choice_1">Chicago</label> 
</div> 

<div class="choice"> 
    <input id="choice_2" type="checkbox" name="choice_2" value="choice_2" /> 
    <label for="choice_2">Los Angeles</label> 
</div> 


<div class="choice">  
    <input id="choice_3" type="checkbox" name="choice_3" value="choice_3" /> 
    <label for="choice_3">San Francisco</label> 
</div> 

的JavaScript：

$(document).ready(function() { 
    var choices = $('.choice'); 

    choices.on('click', function(event) { 
     var choice = $(event.target); 
     var input = choice.find('[type="checkbox"]'); 
     input 
      .prop('checked', !input.is(':checked')) 
      .trigger('change'); 
    }); 

    var inputs = $('.choice input'); 
    inputs.on('change', function(event) { 
     var input = $(event.target); 
     var choice = $(this).closest('.choice'); 

     if (input.is(':checked')) { 
      choice.addClass('active'); 
     } 
     else { 
      choice.removeClass('active'); 
     } 
    }); 
});​ 

演示：jsfiddle

Answer 2

你可以這樣做一對夫婦使用jQuery的點擊功能方面：

// Toggle a class for the div 
// - For this you would setup your styles in the CSS for your site 
$('div').click(function(){ 
    $(this).toggleClass('highlight'); 
}); 

// Animate the background-color for the div 
// - For this you would need to include the jquery.color plugin 
// - https://github.com/jquery/jquery-color 
$('div').toggle(function(){ 
    $(this).animate({backgroundColor: "#aa0000"}, 500); 
}, function(){ 
    $(this).animate({backgroundColor: "#ffffff"}, 500); 
}); 

這裏是一個例子的jsfiddle：http://jsfiddle.net/PC5ry/