我怎么做一个按钮样的过滤器？

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颜色会发生变化，但当我只点击它时，它的部分就会改变。我想这是因为标签的尺寸不满。我怎样才能解决这个问题？

Answer 1

您可以通过在每个单选按钮中添加一个id，然后将.panel-body封装在一个label中，这样就可以解决这个问题：

<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 2

给input一个id，使用带有for属性的label将label连接到input，隐藏input，并通过单击label来选择输入时使用:checked伪类和相邻的同级选择器来样式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>

​