Question

大家好，我在以下视图中有以下复选框列表：

         <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来做到这一点？

Answer 1

JQuery可以完成工作Check and Uncheck Checkboxes with Jquery

Answer 2

尝试这样的事情：

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。

但它的作用是找到div中的所有<input>个元素（这假设只有<input>元素是有问题的复选框 - 你必须做更多检查是否有其他输入类型在复选框旁边，可能是隐藏的输入），并将点击处理程序绑定到每个复选框。当单击一个复选框时（因为它是一个比onchange更一致的事件），处理程序会检查是否选中了复选框状态，如果是，则运行你的代码......否则没有任何反应。

Answer 3

您可以使用jQuery尝试这样的事情，

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

您可以使用$('.ProdcutColors').serialize()获取选中的值，并通过ajax发送这些值。

Answer 4

您可以将单击处理程序附加到每个复选框。这是一个非常简单的例子：

<!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>

See Code on JSFiddler

如何从复选框列表中选中复选框，并在选中复选框时调用Ajax函数？

4 个答案: