Javascript 如何制作按钮式过滤器？

我想在我的网站上做一个按钮式的过滤器。现在，我只是把单选按钮过滤器放在盒子里，但是我想移除单选按钮，当我点击盒子时，让过滤器工作

现在代码如下所示：

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

新问题
()
您可以通过向每个单选按钮添加
id
，然后将
.panel body
包装在
标签中来解决此问题，如下所示：

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

编辑

我已经创建了一个可以为您提供所需结果的应用程序。你唯一需要做的就是像你提供的图片一样水平排列按钮。我希望这能让你走上正轨

您可以在每个单选按钮上添加一个
id
，然后将
面板主体
包装成
标签
，如下所示：

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

编辑

我已经创建了一个可以为您提供所需结果的应用程序。你唯一需要做的就是像你提供的图片一样水平排列按钮。我希望这能让你走上正轨

玩一会儿，熟悉它的工作原理。
给
输入
一个
id
，使用
标签
和
for
属性将
标签连接到
输入，隐藏
输入，当通过单击
标签
选择输入时，使用
：选中的
伪类和相邻同级选择器设置
标签的样式

由于您希望一次只能选择一个输入，因此需要为元素提供一个
名称
属性，以便它们都与为该
名称
提供一个值相关


input[type=“radio”]{
显示：无；
}
输入[type=“radio”]：选中+标签{
背景：#09c；
}
标签{
高度：100%；宽度：100%；
}

新问题(
)
被忽视的问题(
)
回答问题(
)
所有问题(
)
为
输入提供
id
，使用带有
for
属性的
标签
将
标签
连接到
输入
，隐藏
输入
，当通过单击
标签
选择输入时，使用
：选中的
伪类和相邻同级选择器设置
标签的样式

由于您希望一次只能选择一个输入，因此需要为元素提供一个
名称
属性，以便它们都与为该
名称
提供一个值相关


input[type=“radio”]{
显示：无；
}
输入[type=“radio”]：选中+标签{
背景：#09c；
}
标签{
高度：100%；宽度：100%；
}

新问题(
)
被忽视的问题(
)
回答问题(
)
所有问题(
)
谢谢您，先生！它起作用了。顺便问一下，单击框后如何更改框的背景色，如果单击其他框，如何将其更改回白色？是的，这是因为标签没有填充面板主体的空间。您的面板主体类上可能有一些填充导致此问题。我不确定，因为你没有我可以看的例子。谢谢你，先生！它起作用了。顺便问一下，单击框后如何更改框的背景色，如果单击其他框，如何将其更改回白色？是的，这是因为标签没有填充面板主体的空间。您的面板主体类上可能有一些填充导致此问题。但不确定，因为您没有我可以查看的示例。我知道OP的示例中没有该示例，但在您的示例中，单击后无法取消选择任何选项。OP：如果你想让它正常工作，你还需要在所有同名输入中添加一个
name
标签。这将使它只有一个选项可以被选中。@Matthew是的，不知道他们的表单是做什么的，也不知道这是否是设计的，所以我就不去管它了。@Matthew我想用上面的建议解决一些问题。单选按钮不见了，但当我尝试单击框的外侧时，它不起作用。如何扩大有效范围？此外，如何使背景色在单击后保持不变，并在单击其他按钮后变回白色？Thanks@user7677413你是想对对方的回答发表评论吗？要增加可单击的区域，请使用填充或增加标签的高度/宽度。用一个例子更新了我的答案。我已经更新了答案，告诉您如何在选择另一个标签后将其变回白色“并且由于您希望一次只能选择一个输入，您需要为元素提供名称属性，以便它们都与为该名称提供值联系起来”@MichaelCoker感谢它的工作！但是，我想修改的一件事是，如何使包装标签的整个盒子（col-sm-3）更改其背景颜色？我知道OP的示例中不存在背景颜色，但在您的示例中，您不能