顯示按鈕被選中

-2

我有使用CSS精靈複選框列表。的複選框都很好，但我想它，以便當用戶有檢查，然後所有的箱子它（然後才）在頁面底部顯示一個按鈕。顯示按鈕被選中

任何幫助將不勝感激。

我有jfiddle但沒得到全 - 必須由代碼陪伴？

來源

2013-06-02 Maverick

您可以用jQuery做到這一點。 –

告訴我們你的代碼... – Pevara

採用javascript/jQuery的 – lazyprogrammer

理論上，這可以只用CSS來實現，通過使用:checked選擇，與+兄弟選擇組合。該css看起來是這樣的：

.checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + #the-button { 
    display: block; 
}

理論上這應該工作，但是當我在jsFiddle中嘗試它時，它有點奇怪。我不認爲這是一個非常可行的解決方案，因爲它很難調試，並且需要你的html有一個不能改變的特定結構。

在現實生活中，這將使用jQuery的幾行來完成。我想出了看起來像這樣的代碼：

// cache he collection of checkboxes 
var $checkboxes = $('#js-solution .checkbox'); 
// when a checkbox changes 
$checkboxes.change(function() { 
    // filter out the ones that are checked 
    var $checked = $checkboxes.filter(':checked'); 
    // if the number of checked ones is 5 
    if ($checked.length == 5) { 
     // show the button 
     $('#the-js-button').css('display', 'block'); 
    // if the number of checked ones is not 5 
    } else { 
     // hide the button 
     $('#the-js-button').css('display', 'none'); 
    } 
});

的意見應足以讓你明白髮生了什麼，但隨時問。

我就把這兩個解決方案彼此未來在這個小提琴：http://jsfiddle.net/7GN7q/1/
CSS的解決方案並沒有爲我工作，但我認爲這是一個Chrome的事情，因爲我看不出有什麼是無效的，在檢查時該風格確實得到應用，取消檢查並檢查檢查器中的display:block確實使其工作。在現實生活中，我會選擇js解決方案。

來源

2013-06-02 14:58:53 Pevara

非常感謝。我會看看並報告回來。 – Maverick

我收到的複選框可以顯示，但是在檢查任何框之前出現的按鈕出現問題。也有一種方法可以使用我設計的兩個複選框？ checkbox1.png＆checkbox2.png或sprite checkbox.png – Maverick

是的，你可以。看看Ryan Fait的實現。（google it） –

您可以看到，使用選擇器〜，檢查的輸入不需要連續成行。例如，它可能只有十分之五。分叉的jsfiddle：http://jsfiddle.net/GCyrillus/sqRaG/

.checkbox:checked ~ .checkbox:checked ~.checkbox:checked ~ .checkbox:checked~ .checkbox:checked ~ #the-button { 
    display: block; 
}

來源

2013-06-02 16:44:30

這是現貨 - 感謝Peter＆GC。現在我該如何去取代複選框 - 我很喜歡d在其他教程中，但沒有運氣。 – Maverick

使用輸入+它的label.Place圖像在標籤中用視覺替換複選框。設置絕對的Checbox，並離開屏幕非常遠。他們就是你。如果標籤和複選框具有正確的屬性id和for。 –

如果添加第六個：已選中的選擇器，則可以再次隱藏該按鈕。 –

顯示按鈕被選中

回答

相關問題