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 尝试类似的操作，

演示：http: //jsfiddle.net/ZRHZT/1/

您可以使用$('.ProdcutColors').serialize()来获取检查值并通过 ajax 发送这些值。

于 2012-09-14T14:19:41.613 回答
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”-我在您的代码中看到您只设置了类-它更容易识别它，特别是在这种情况下，如果你给它一个身份证。

但它所做的是找到<input>div 中的所有元素（并且假设唯一的<input>元素是有问题的复选框 - 你必须做更多检查复选框旁边是否有其他输入类型，比如隐藏的输入），并且将点击处理程序绑定到它们中的每一个。当一个复选框被点击时（因为它是一个比 onchange 更一致的事件），处理程序检查复选框状态是否被选中，如果是，则运行你的代码......否则什么也不会发生。

于 2012-09-14T14:17:58.340 回答
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 回答