0

我有一个表单，允许用户过滤一组产品。当他们单击单选按钮时，它会自动通过 ajax 将表单提交到页面的另一个部分，这意味着页面和表单永远不会刷新。我有 3 组收音机选项。我想在另一个 div 中显示每个当前选择的标签，以便他们可以一目了然地看到当前应用的过滤器。这是我现在所拥有的：

<form id="myform" action="blah.php">
  <label for="allprice">
    <input type="radio" name="cat[price]" id="allprice" value="1" />
    All Price Ranges</label>
  <label for="m-150-300">
    <input type="radio" name="cat[price]" id="m-150-300" value="2" />
    $150 - $300</label>
  <label for="m-300-700">
    <input type="radio" name="cat[price]" id="m-300-700" value="3" />
    $300 - $700</label>
  <br />
  <br />
  <label for="allmaterial">
    <input type="radio" name="cat[material]" id="allmaterial" value="4" />
    All Materials</label>
  <label for="straw">
    <input type="radio" name="cat[material]" id="straw" value="5" />
    Straw</label>
  <label for="felt">
    <input type="radio" name="cat[material]" id="felt" value="6" />
    Felt</label>
  <br />
  <br />
  <label for="allcolor">
    <input type="radio" name="cat[color]" id="allcolor" value="4" />
    All Colors</label>
  <label for="blue">
    <input type="radio" name="cat[color]" id="blue" value="5" />
    Blue</label>
  <label for="green">
    <input type="radio" name="cat[color]" id="green" value="6" />
    Green</label>
</form>

<div class="filters">
Current Filters: <span class="current-filters">Straw, Green</span>
</div>

它说“当前过滤器”的地方是我要列出当前选中的单选框的地方。此外，如果选择“全部”任何内容，我希望它被忽略。

如何获取选定单选框的标签并在逻辑意义上将它们显示在其他地方以逗号分隔，除了最后一个，如果选择“全部”则忽略？此外，如果为所有这些都选择了“全部”，我怎么能设置它说“没有应用过滤器”这可能与 jQuery 吗？

4

1 回答 1

1

我建议以下

  1. 用一个类将每个部分包装成一个包装器（下面的例子有div.control-group）
  2. 对于您的“所有”单选按钮，添加一个数据属性以区别于非所有项目（下面的示例使用data-all="all"）

HTML：

<form id="myform" action="blah.php">
    <div class="control-group">
        <label for="allprice">
            <input type="radio" name="cat[price]" id="allprice" value="1" data-all="all" />
            All Price Ranges</label>
        <label for="m-150-300">
            <input type="radio" name="cat[price]" id="m-150-300" value="2" />
            $150 - $300</label>
        <label for="m-300-700">
            <input type="radio" name="cat[price]" id="m-300-700" value="3" />
            $300 - $700</label>
    </div>
    <br />
    <br />
    <div class="control-group">
        <label for="allmaterial">
            <input type="radio" name="cat[material]" id="allmaterial" value="4" data-all="all"/>
            All Materials</label>
        <label for="straw">
            <input type="radio" name="cat[material]" id="straw" value="5" />
            Straw</label>
        <label for="felt">
            <input type="radio" name="cat[material]" id="felt" value="6" />
            Felt</label>

    </div>
    <br />
    <br />
    <div class="control-group">
        <label for="allcolor">
            <input type="radio" name="cat[color]" id="allcolor" value="4" data-all="all"/>
            All Colors</label>
        <label for="blue">
            <input type="radio" name="cat[color]" id="blue" value="5" />
            Blue</label>
        <label for="green">
            <input type="radio" name="cat[color]" id="green" value="6" />
            Green</label>

    </div>
</form>

<div class="filters">
Current Filters: <span class="current-filters"></span>
</div>

<button id="filter-me">Filter</button>

Javascript（#filter-me点击按钮触发）：

<script language="JavaScript">
    $('#filter-me').click(function(){
        var newarr = [];
        $('#myform .control-group input:checked').each(function(){
            if ($(this).attr('data-all') !== 'all') {
                newarr.push($(this).closest('label').text());
            };
        });
        $('.current-filters').text(newarr.join(', '));
    });
</script>
于 2012-11-27T22:01:42.227 回答