1

jQueryでリアルタイムの結果をフィルタリングしたい（このサイトhttp://shop.www.hi.nl/hi/mcsmambo.p?M5NextUrl=RSRCHのように）。したがって、誰かがチェックボックスをオンにすると、結果はリアルタイムで（divで）更新されます。今、私はjQueryの初心者であり、多くの例を試しましたが、それを機能させることができません。これが私のコードです、誰かが私が間違っていることを教えてもらえますか？どうもありがとうございます！

HTML

<div id="c_b">
    Kleur:<br />
    <input type="checkbox" name="kleur[1]" value="Blauw"> Blauw <br />
    <input type="checkbox" name="kleur[2]" value="Wit"> Wit <br />
    <input type="checkbox" name="kleur[3]" value="Zwart"> Zwart <br />
    <br />
    Operating System:<br />
    <input type="checkbox" name="os[1]" value="Android"> Android <br />
    <input type="checkbox" name="os[2]" value="Apple iOS"> Apple iOS <br />
    </div>

<div id="myResponse">Here should be the result</div>

jQuery

function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });

     var dataString = $(allVals).serialize();

    $.ajax({
        type:'POST',
        url:'/wp-content/themes/u-design/filteropties.php',
        data: dataString,
        success: function(data){
            $('#myResponse').html(data);
        }
    });
  }

$(document).ready(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();  
});

PHP

//Just to see if the var passing works
echo var_export($_POST);
4

1 に答える 1

1

.serialize（）を誤って使用しています。これは、フォーム要素でのみ機能します。

このコードを使用すると、必要なものが得られると思います。

Javascript / JQuery

function updateTextArea() {         

    var allVals = "";

    $('#c_b input[type=checkbox]:checked').each(function() {

        currentName = $(this).attr("name");
        currentVal  = $(this).val();

        allVals = allVals.concat( (allVals == "") ? currentName + "=" + currentVal : "&" + currentName + "=" + currentVal );

    });

    $.ajax({
        type:'POST',
        url:'/wp-content/themes/u-design/filteropties.php',
        data: allVals,
        dataType: "html",
        success: function(data){
            $('#myResponse').html(data);
        }
    });

  }

$(document).ready(function() {

   $('#c_b input[type=checkbox]').click(updateTextArea);

   updateTextArea();  

});
于 2012-07-04T23:01:32.527 に答える