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 に答える