Question

我有以下功能，当页面上有一个产品时效果很好：

<script type="text/javascript">// <![CDATA[
function confSubmit()
{
if(!document.getElementById("one").checked)
{ 
    alert("Please read and accept the terms and conditions + Warnings in order to sign    up to Woolly Mammoth");
    return false;
}

}
// ]]></script>

如果未检查条款和条件的复选框，则上述功能会显示错误。

现在我在页面上有多个产品都有自己的复选框，问题是如果我在每个产品旁边放一个复选框，那么它总是会显示错误，除非他们选中每个产品旁边的复选框。

任何人都可以帮我编辑这个功能，这样我就可以在多个复选框上使用它但是只需要检查一个盒子。

该功能在paypal按钮上调用。当然有一种更简单的方法，而不是重命名函数和更改每个产品的ID？

谢谢

Answer 1

您可以做的是通过类名获取元素，并为复选框提供一个通用的CSS类名。不幸的是＆lt; IE9不支持getElementsbyClassName，所以我建议使用jQuery。

function confSubmit() {
    var checkCount = $('.myclass:checked').length;
    if(checkCount < 1) {
        alert('....');
    }
}

Answer 2

我没有运行代码，所以测试一下。您需要为每个复选框设置不同的ID。

<script type="text/javascript">// <![CDATA[
function confSubmit()
{
var boxesChecked = 0;

if(document.getElementById("one").checked)
{ 
boxesChecked++;
}
if(document.getElementById("two").checked)
{ 
boxesChecked++;
}
//same for all boxes ....

if(boxesChecked==1)
    return true;
 else
    return false;

}
// ]]></script>

Answer 3

Diodeus的回答是正确的，但是如果你想这样做没有 JQuery（上帝帮助你），你只需要一个polyfill for getElementsByClassName（）：

来自https://gist.github.com/eikes/2299607

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License


if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

然后你可以正常使用getElementsByClassName：

var elements = document.getElementsByClassName('myClass');
for(var i = 0; i < elements.length; i++) {
     if(elements[i].checked) {
        //do something here.
     }
}

您需要选择的每个元素都应用myClass：class="myClass"或class="something something myClass"。

更改JavaScript函数以使用多个复选框来接受条款和条件

3 个答案: