如何製作按鈕式過濾器？

Question

我想在我的網絡中製作按鈕式過濾器。現在，我只是把單選按鈕過濾器放在盒子裏面，但我想刪除單選按鈕，只需點擊盒子就可以使過濾器工作。

的代碼看起來是這樣的現在：

     <div class="question-header" data-bind="visible: jobQuestions().length > 0"> 
          <div class="col-sm-3" id="filter-1"> 
           <div class="panel-body"> 
            <input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" /> 
            New Questions 
            (<span data-bind="text: newJobQuestionsCount"></span>) 
           </div> 
          </div> 
          <div class="col-sm-3" id="filter-2"> 
           <div class="panel-body""> 
            <input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" /> 
            Ignored Questions 
            (<span data-bind="text: ignoredJobQuestionsCount"></span>) 
           </div> 
          </div> 
          <div class="col-sm-3" id="filter-3"> 
           <div class="panel-body"> 
            <input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" /> 
            Answered Questions 
            (<span data-bind="text: answeredJobQuestionsCount"></span>) 
           </div> 
          </div> 
          <div class="col-sm-3" id="filter-4"> 
           <div class="panel-body"> 
            <input type="radio" value="all" data-bind="checked: jobQuestionsFilter" /> 
            All Questions 
            (<span data-bind="text: allJobQuestionsCount"></span>) 
           </div> 
          </div> 
         </div> 

我有什麼解決？

編輯：

當我嘗試它徘徊，整個箱變的BG-顏色，但是當我只需點擊它只是它改變的部分。我假設這是因爲標籤尺寸不夠大。我該如何解決這個問題？

<label for="radio1"> 
    <div class="panel-body"> 
     <input type="radio" value="new" id="radio1" data-bind="checked: jobQuestionsFilter" class="" /> 
     New Questions 
     (<span data-bind="text: newJobQuestionsCount"></span>) 
    </div> 
</label> 

然後在你的CSS應用display: none您要的所有單選按鈕：

Answer 1

您可以通過添加id到每一個單選按鈕，然後包裹.panel-body在label這樣解決這個問題隱藏。

編輯

我創建了一個codepen，會給你想要的結果。您需要做的唯一事情就是按照您提供的圖像水平排列按鈕。我希望這能讓你走上正軌。

玩了一段時間熟悉它是如何工作的。

Answer 2

給所述input一個id，使用label與for屬性到label連接到input，隱藏input，並使用:checked僞類和相鄰的兄弟選擇樣式化label當通過點擊選擇的輸入在label。

而且因爲你想只能夠在同一時間選擇一個輸入，你需要給元素的name屬性，這樣他們都依賴於該name

input[type="radio"] { 
 
    display: none; 
 
} 
 
input[type="radio"]:checked + label { 
 
    background: #09c; 
 
} 
 
label { 
 
    height: 100%; width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="question-header" data-bind="visible: jobQuestions().length > 0"> 
 
    <div class="col-sm-3" id="filter-1"> 
 
    <div class="panel-body"> 
 
     <input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" id="new" name="someName" /> <label for="new">New Questions (
 
     <span data-bind="text: newJobQuestionsCount"></span>)</label> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-3" id="filter-2"> 
 
    <div class="panel-body"> 
 
     <input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" id="ignored" name="someName"/><label for="ignored"> Ignored Questions (
 
     <span data-bind="text: ignoredJobQuestionsCount"></span>)</label> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-3" id="filter-3"> 
 
    <div class="panel-body"> 
 
     <input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" id="answered" name="someName"/><label for="answered"> Answered Questions (
 
     <span data-bind="text: answeredJobQuestionsCount"></span>)</label> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-3" id="filter-4"> 
 
    <div class="panel-body"> 
 
     <input type="radio" value="all" name="someName" data-bind="checked: jobQuestionsFilter" id="all"/> <label for="all">All Questions (
 
     <span data-bind="text: allJobQuestionsCount"></span>)</label> 
 
    </div> 
 
    </div> 
 
</div>

提供一個值