[英]Select - Unselect checkbox- getElementById
代碼不運行,也不顯示任何錯誤
這是我的小提琴
function selectall(source, course) { checkboxes = document.getElementById(course); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> checkbox 1 <input id="trainingOverview1" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview1" type="checkbox" class="" name="fadddsd"><br> ----------------------------------------- <br><br> checkbox set 2 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')"> <br> checkbox 1 <input id="trainingOverview2" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview2" type="checkbox" class="" name="fadddsd"><br>
頁面中的id
應該是唯一的。 另外, document.getElementById()
返回單個元素,而不是像元素對象那樣的數組或數組。
使用類,並使用document.getElementsByClassName()
或document.querySelectorAll()
選擇它們:
function selectall(source, course) { var checkboxes = document.getElementsByClassName(course); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> checkbox 1 <input class="trainingOverview1" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input class="trainingOverview1" type="checkbox" class="" name="fadddsd"><br> ----------------------------------------- <br><br> checkbox set 2 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')"> <br> checkbox 1 <input class="trainingOverview2" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input class="trainingOverview2" type="checkbox" class="" name="fadddsd"><br>
如果您無法更改HTML,則可以使用document.querySelectorAll()
選擇多個非唯一ID,但這取決於瀏覽器的實現,並且可能在以后不起作用:
function selectall(source, course) { var checkboxes = document.querySelectorAll('#' + course); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"> <br> checkbox 1 <input id="trainingOverview1" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview1" type="checkbox" class="" name="fadddsd"><br> ----------------------------------------- <br><br> checkbox set 2 Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview2')"> <br> checkbox 1 <input id="trainingOverview2" type="checkbox" class="" name="fasd"><br> <br> checkbox 2 <input id="trainingOverview2" type="checkbox" class="" name="fadddsd"><br>
id必須對每個DOM元素都是唯一的,創建復選框組的正確方法是為輸入指定相同的名稱,然后可以使用document.getElementsByName('name')
在javascript中獲取它們
function selectall(source,course) { checkboxes = document.getElementsByName(course); for(var i=0, n=checkboxes.length;i<n;i++) { checkboxes[i].checked = source.checked; } }
Select Unselect<input type="checkbox" onclick="selectall(this,'trainingOverview1')"><br> checkbox 1<input name="trainingOverview1" type="checkbox" class="" ><br><br> checkbox 2<input name="trainingOverview1" type="checkbox" class="" ><br>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.