將Jquery的複選框值傳遞給PHP，並將結果顯示在div中

Question

我想用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); 

Answer 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(); 

});