全選？我究竟做錯了什麼？

-1

我試圖讓這個選擇所有的代碼工作，但我不知道我做錯了什麼。我在這裏發現代碼 http://jsfiddle.net/L6e72fpv/全選？我究竟做錯了什麼？

我不確定這是兼容性問題，還是我把代碼放在一起是錯誤的。它在jsfiddle上運行良好，但不能在整頁上運行。這是我在一個頁面中的方式。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" /> 
<title>TEST</title> 
<script> 
$("#checkAll").change(function() { 
    $("input:checkbox").prop('checked', $(this).prop("checked")); 
}); 
</script> 
</head> 
<body> 
<form action="#"> 
    <p> 
    <label> 
     <input type="checkbox" id="checkAll" /> Check all</label> 
    </p> 

    <fieldset> 
    <legend>Loads of checkboxes</legend> 
    <p> 
     <label> 
     <input type="checkbox" /> Option 1</label> 
    </p> 
    <p> 
     <label> 
     <input type="checkbox" /> Option 2</label> 
    </p> 
    <p> 
     <label> 
     <input type="checkbox" /> Option 3</label> 
    </p> 
    <p> 
     <label> 
     <input type="checkbox" /> Option 4</label> 
    </p> 
    </fieldset> 
</form> 
</body> 
</html> 
</body> 
</html>

來源

2017-04-21 Markw

將腳本放在最下面，您正試圖在複選框實際創建之前分配事件。爲了使它在頂部工作，把它放在一個document.ready函數中，並且包含jquery需要 – CAllen

您是否將jQuery導入到整個頁面？你確定你的整個頁面中沒有更多的ID爲「checkAll」的元素嗎？ – Lixus

看起來像你的'不包括jQuery庫。不加載它，jQuery將無法工作。你也關閉了你的body和html標籤兩次。

試試這個：

<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" /> 
 
<title>TEST</title> 
 
</head> 
 
<body> 
 
<form action="#"> 
 
    <p> 
 
    <label> 
 
     <input type="checkbox" id="checkAll" /> Check all</label> 
 
    </p> 
 

 
    <fieldset> 
 
    <legend>Loads of checkboxes</legend> 
 
    <p> 
 
     <label> 
 
     <input type="checkbox" /> Option 1</label> 
 
    </p> 
 
    <p> 
 
     <label> 
 
     <input type="checkbox" /> Option 2</label> 
 
    </p> 
 
    <p> 
 
     <label> 
 
     <input type="checkbox" /> Option 3</label> 
 
    </p> 
 
    <p> 
 
     <label> 
 
     <input type="checkbox" /> Option 4</label> 
 
    </p> 
 
    </fieldset> 
 
</form> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script> 
 
$("#checkAll").change(function() { 
 
    $("input:checkbox").prop('checked', $(this).prop("checked")); 
 
}); 
 
</script> 
 
</body> 
 
</html>

我所做的是包括jQuery的 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 並加載它之後添加腳本。它現在工作正常！

來源

2017-04-21 17:09:11

謝謝。對於JQuery我還是個新手。 extra/html和/ body從刪除代碼中留下。沒有意識到我錯過了他們。 – Markw

全選？我究竟做錯了什麼？

回答

相關問題