如何制作类似按钮的过滤器？

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应用于你想要隐藏的所有单选按钮。

修改

我创建了一个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> <提供值相关联/ p>

string messageName = "ModalVR.GetBatteryInfo";
Type messageType = Assembly.GetAssembly(typeof(Message)).GetType(messageName);
Message derivedMessage = (Message)JsonUtility.FromJson(json, messageType);

Assembly