如何在Javascript中更改復選框的邊框顏色

Question

我正在學習如何對各種類型的元素進行表單驗證，並且僅希望使用Javascript進行。 我在這里有一些復選框，還有一個Javascript函數，用於檢查復選框是否在表單提交上至少選擇了一個選項。 基本上，如果未選擇任何選項，則復選框應顯示為紅色。 但是我得到了錯誤：

未捕獲的TypeError：無法設置未定義的屬性'borderColor'

 function validate() { var ok = true; var yes = document.getElementById("yes").checked var no = document.getElementById("no").checked; if (!yes && !no) { document.getElementsByClassName(".btn-group").style.borderColor = "red"; } return ok; } 

 <div data-toggle="buttons" class="btn-group"> <label class="btn active"> <input id = "yes" type="checkbox" name="box" value="yes" /> </i>Yes </label> <label class="btn active"> <input id = "no" type="checkbox" name="box" value="no" />No </label> </div> 

Answer 1

那里有一些問題：

1. 如果使用getElementsByClassName ，則應使用不帶點的類名。
2. style屬性用於元素（而getElementsByClassName返回元素列表）。
3. 如果僅設置邊框的顏色（而不是樣式和寬度），則將沒有邊框。

這是更正：

 function validate() { var ok = true; var yes = document.getElementById("yes").checked var no = document.getElementById("no").checked; if (!yes && !no) { ok = false; document.getElementsByClassName("btn-group")[0].style.border = '1px solid red'; } else { document.getElementsByClassName("btn-group")[0].style.border = ''; } return ok; } 

 <div data-toggle="buttons" class="btn-group"> <label class="btn active"> <input id = "yes" type="checkbox" name="box" value="yes" /> Yes </label> <label class="btn active"> <input id = "no" type="checkbox" name="box" value="no" />No </label> </div> <button onclick="validate()">Validate</button> 

Answer 2

getElementsByClassName()返回元素的集合，因此您需要遍歷結果以確保將樣式更改應用於每個元素。

此外，您需要使用element.setAttribute()方法來更改樣式，如下所示：

element.setAttribute("style","border-color: red");

將這兩件事結合起來可以為您帶來想要的結果。

編輯：你沒有用setAttribute()如果你不想，因為尼爾指出。 要帶走的重要事情是您需要遍歷集合。

編輯2：再次查看您的代碼，我注意到當您調用document.getElementsByClassName(".btn-group").style.borderColor = "red"; ，您無需獲取復選框，而是獲得了btn-group類的divs集合，因此您實際上是在嘗試將div的邊框顏色設置為紅色，而不是復選框。 您還總是在validate()的末尾無條件地返回true 。

如果僅選中這兩個復選框，則只需使用id即可更改它們：

function validate() {
  var ok = true;
  var yes = document.getElementById("yes").checked
  var no = document.getElementById("no").checked;

  if (!yes && !no) {
    document.getElementById("yes").setAttribute("style","border-color: red");
    document.getElementById("no").setAttribute("style","border-color: red");
    // no checkbox selected, validation should fail and return false
    return !ok;
  } else {
    // checkbox selected, validation should pass and return true
    return ok;
  }
}

Answer 3

您應該在按鈕組中添加或刪除類，以便隱藏顯示邊框。 驗證更改后，只需添加或刪除類。

另外，您需要遍歷所有按鈕組類或選擇一個。

注意： 我使用“ 您可能不需要jQuery”中的類方法 。

 function validate() { var btnGroups = document.getElementsByClassName("btn-group"); for (var i = 0; i < btnGroups.length; i++) { var btnGroup = btnGroups[i]; var yes = document.getElementById("yes")['checked'] == true; var no = document.getElementById("no")['checked'] == true; if (!yes && !no) { if (!hasClass(btnGroup, 'invalid')) addClass(btnGroup, 'invalid'); return false; } else { if (hasClass(btnGroup, 'invalid')) removeClass(btnGroup, 'invalid'); } } return true; } function hasClass(el, className) { if (el.classList) return el.classList.contains(className); else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); } function addClass(el, className) { if (el.classList) el.classList.add(className); else el.className += ' ' + className; } function removeClass(el, className) { if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('(^|\\\\b)' + className.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' '); } 

 .btn-group.invalid { border : thin solid red; } 

 <div data-toggle="buttons" class="btn-group"> <label class="btn active"> <input type="checkbox" id="yes" name="box" value="yes" onchange="validate()" />Yes </label> <label class="btn active"> <input type="checkbox" id="no" name="box" value="no" onchange="validate()" />No </label> </div>