0

これを機能させるのに苦労しています。

色の異なるチェックボックスがいくつかあります。ユーザーが 1 つのチェックボックスをクリックすると、indexMain DIV (すべてのアイテムが表示される DIV) に、選択した色のアイテムのみが表示されます。

また、SUBMIT ボタンを持たないようにしたいので、ユーザーがチェックボックスの 1 つをクリックしたときに、DIV が選択した項目をロードするようにします。

これまでのところ、私はこれを持っています：

Javascript:

<script>
$(".regularCheckbox").change(function() {
var all_boxes = $('.regularCheckbox');
var checked_boxes = $('.regularCheckbox:checked');
var all_boxes_values = [];

checked_boxes.each(function(){
 var cb_value = $(this).val();
 all_boxes_values.push(cb_value);
});

var all_boxes_values_clean = all_boxes_values.join(", ");
console.log(all_boxes_values_clean);
$.get("index.php", {q: all_boxes_values_clean},
      function(result) {
       $("#indexMain").html(result);
      })
}); 
</script>

形：

<form method="post" action="index.php">

<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' id='checkbox-1-1' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
<input type="submit" />
</form>

私の indexMain DIV で結果を取得する PHP:

$color = $_GET['color'];

現在、データを送信してindex.phpページ全体をリロードするには、SUBMITを押す必要があります...

助言がありますか？

4

2 に答える 2

0

同様の問題がありました。このjqueryスニペットが役立ちます。この例では、 jqueryval関数を使用して URL の値を取得します。フォーム/ボタン/などをクリックすると、名前付きの div に URL をロードする関数が起動します。

$('#yourclickableobjectID').click( function(){
        $('#yourdivID').load("yoururl.php?yourquerystring=somestuff");
});
于 2012-08-01T21:08:52.133 に答える
0

これは jQuery で行うことができます。クラスを使用し、そのクラスの一部ではないアイテムを非表示にします。

<div id="items">
    <div name="item" class="blue">Something</div>
    <div name="item" class="red">Something else</div>
    <div name="item" class="green">Third thing</div>
</div>

<input type="checkbox" value="green" /> green
<input type="checkbox" value="red" /> red
<input type="checkbox" value="blue" /> blue

<script language="javascript" type="text/javascript">
    $("input").on("click", function() { 
        if ($(this).attr("checked")) {
            $("#items div[name=item]:not(." + $(this).val()  + ")").hide();
            $("#items div[name=item]." + $(this).val()).show();
        }
    });
</script>
于 2012-08-01T21:01:02.507 に答える