0

みなさん、こんにちは。私のビューには、次のようなチェックボックスのリストがあります。

         <div class="ProdcutColors" style=" font:11px Lucida Sans Unicode, Lucida Grande, sans-serif; overflow:auto; height:135px; width:135px; margin:-240px 0 0 528px; border:1px solid #ccc">
<br />
<input type="checkbox" name="Black" value="Black" class="ProdcutColors" />
<label>Black</label>
<br />
<input type="checkbox" name="Red" value="Red" class="ProdcutColors" />
<label>Red</label>
<br />
<input type="checkbox" name="Pink" value="Pink" class="ProdcutColors"/>
<label>Pink</label>
<br />
<input type="checkbox" name="Blue" value="Blue" class="ProdcutColors"/>
<label>Blue</label>
<br />
<input type="checkbox" name="Brown" value="Brown" class="ProdcutColors"/>
<label>Brown</label>
<br />
<input type="checkbox" name="Khaki" value="Khaki" class="ProdcutColors"/>
<label>Khaki</label>
<br />
<input type="checkbox" name="White" value="White" class="ProdcutColors"/>
<label>White</label>
<br />
<input type="checkbox" name="Silver" value="Sivler" class="ProdcutColors"/> 
<label>Silver</label>
<br />  
</div>

今私が欲しいのは、ユーザーが選択したチェックボックスの値を渡してajax関数を呼び出したい色のいずれかをチェックした場合です。JavaScriptを使用してこれを行う方法を教えてもらえますか？

4

4 に答える 4

0

JQueryは、Jqueryを使用してジョブチェックとチェックボックスのチェックを外すことができます

于 2012-09-14T14:12:41.660 に答える
0

次のようなものを試してください。

window.onload = function () {
    var container = document.getElementById("ProductColors");
    var checks = container.getElementsByTagName("input");
    var check;

    for (var i = 0; i < checks.length; i++) {
        check = checks[i];
        check.onclick = function () {
            if (this.checked) {
                // Run AJAX function, and use this.value for checkbox value
            }
        };
    }
};

これは明らかにJavascriptのみのソリューションであり、メインのdivのIDが「ProductColors」であると想定しています。コードではクラスのみを設定していることがわかります。特にこの場合は、クラスを指定すると簡単に識別できます。 ID。

<input>しかし、それはdiv内のすべての要素を見つけることです（これは、<input>問題のチェックボックスだけが要素であると想定しています-チェックボックスの横に、非表示の入力など、他の入力タイプがあるかどうかをさらにチェックする必要があります）。クリックハンドラーをそれらのそれぞれにバインドします。チェックボックスがクリックされると（onchangeよりも一貫性のあるイベントであるため）、ハンドラーはチェックボックスの状態がチェックされているかどうかを確認し、チェックされている場合はコードを実行します...そうでない場合は何も起こりません。

于 2012-09-14T14:17:58.340 に答える
0

jQueryを使用してこのようなことを試すことができます。

デモ： http： //jsfiddle.net/ZRHZT/1/

$('.ProdcutColors').serialize()チェックされた値を取得し、それらの値をajaxを介して送信するために使用できます。

于 2012-09-14T14:19:41.613 に答える
0

各チェックボックスにクリックハンドラーをアタッチできます。非常に簡単な例を次に示します。

<!DOCTYPE html>
     <html>
        <head>
           <title>onclickTest</title>
           <script type="text/javascript">
             function RunAJAX(color)
             {
               //Do something...
               alert(color); //proof this works....
             }
           </script>
        </head>
        <body>
          <div>
            <input name="Black" value="Black" onclick="RunAJAX('black')" type="checkbox" /> 
            <label>Black</label>
          </div>
        </body>
      </html>

JSFiddlerのコードを参照してください

于 2012-09-14T14:40:36.500 に答える