從一個模擬的複選框

我想取消選中檢查，以瞭解如何修改這個代碼來處理從一個模擬的複選框取消選中。從一個模擬的複選框

首先，這裏的原始輸入HTML：

<input type="radio" name="rf538" id="rf538" class="page_checkbox">

這裏是page_checkbox類的輸入CSS：

.page_checkbox { 
    display: none; 
}

輸入HTML之後，我有這樣的：

<label for="rf538"><span></span>Pleasures</label>

下面是內span我的CSS代碼：

.page_checkbox+label span { 
    display: inline-block; 
    width: 18px; 
    height: 18px; 
    margin: -2px 8px 0px 0px; 
    background-color: #ffffff; 
    vertical-align: middle; 
    cursor: pointer; 
    border-radius: 1px; 
}

最後，這裏是創建該複選框，並在支票上的CSS代碼：

.page_checkbox:checked+label span:before { 
    position: relative; 
    left: 3px; 
    top: 2px; 
    content: '\002714'; 
    color: #f06000; 
    font: 16px/16px Arial, Helvetica, Sans-serif; 
}

你可以看到，對於具有checked state一個CSS，但我不知道該怎麼處理unchecking the checked span box。我想象一些JavaScript涉及？

來源

2017-08-30 jkushner

你爲什麼要使用一個單選按鈕，當你想一個複選框？改變它似乎解決了你的問題 – j08691

是的解決它。謝謝。 – jkushner

因爲你不能在沒有JavaScript或復位鍵取消選擇一個單選按鈕，你彷彿是後一個複選框來代替，所以更改單選按鈕，複選框和它的作品。

.page_checkbox { 
 
    display: none; 
 
} 
 

 
.page_checkbox+label span { 
 
    display: inline-block; 
 
    width: 18px; 
 
    height: 18px; 
 
    margin: -2px 8px 0px 0px; 
 
    background-color: #ffffff; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    border-radius: 1px; 
 
} 
 

 
.page_checkbox:checked+label span:before { 
 
    position: relative; 
 
    left: 3px; 
 
    top: 2px; 
 
    content: '\002714'; 
 
    color: #f06000; 
 
    font: 16px/16px Arial, Helvetica, Sans-serif; 
 
}

<input type="checkbox" name="rf538" id="rf538" class="page_checkbox"> 
 
<label for="rf538"><span></span>Pleasures</label>

來源

2017-08-30 21:23:09 j08691

從一個模擬的複選框

回答

相關問題