エミュレートされたチェックボックスのチェックを解除する

Question

エミュレートされたチェックボックスのチェックを外すために、このコードを変更する方法を知りたいのですが。

まず、ここで元の入力のHTMLです：

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

そしてここでは、クラスpage_checkboxの入力CSSです：

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

：

.page_checkbox { 
    display: none; 
} 

入力htmlの後、私はこれを持っています

の中に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が関わっていることを想像していますか？

Answer 1

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>