更改JavaScript函數以使用多個復選框以接受條款和條件

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>

如果未選中條款和條件的復選框，則上述功能將顯示錯誤。

現在，頁面上有多個產品都有各自的復選框，問題是如果我在每個產品旁邊都放置一個復選框，那么除非它們選中每個產品旁邊的復選框，否則它始終顯示錯誤。

誰能幫我編輯該功能，以便我可以在多個復選框上使用它，但只需要選中一個復選框。

在貝寶按鈕上調用該功能。 當然，有一種更簡便的方法，而不是重命名功能並更改每個產品的ID？

謝謝

Answer 1

您可以做的是改為通過類名獲取元素，並為復選框提供一個通用的CSS類名。 不幸的是<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的情況下做到這一點（上帝會幫助您），則只需要對getElementsByClassName（）使用polyfill：

從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" 。