JavaScript復選框onclick函數

Question

我堅持使用與復選框驗證相關的簡單JavaScript函數。 如果選中cb1，我需要document.write，如果cb2，則需要相同。 如果兩者或其中一個未被檢查，則不寫任何內容。

<html>
<head>
<title>TEST PAGE</title>
    <script type="text/javascript" src="submit.js"></script>
</head>
<body>
    <div style="width:100%"><input type="checkbox" id="cb1"></div>
    <div style="width:100%"><input type="checkbox" id="cb2"></div>

    <div style="width:100%"><input type="submit" name="execute" id="execute" value="Execute" onClick="run();"></div>

</body>
</html>

submit.js

function run() {

    document.write('<div>' + "HERE GOES YOUR CHECKBOX CHOICE: " + '</div>');

    if(document.getElementById("cb1").checked == true) {
        document.write("This is check box 1");
    }
    if(document.getElementById("cb2").checked == true) {
        document.write("This is check box 2");
    }
}

Answer 1

這是一個改進的運行功能：

function run() {

    var snip = "<div>HERE GOES YOUR CHECKBOX CHOICE: </div>";

    if(document.getElementById("cb1").checked == true) {
        snip += "<br/>This is check box 1";
    }
    if(document.getElementById("cb2").checked == true) {
        snip += "This is check box 2";
    }
    document.write(snip);
}

在實際讀取元素之前，每個人都發現了覆蓋html的錯誤，因此這是導致錯誤的原因，清除DOM然后嘗試讀取不再存在的輸入屬性。

Answer 2

你不應該使用document.write。 使用附加到標簽之類的

$("#divid").append($("<input/>",{type:"checkbox",onclick:"yourfunction(this)"}));

Answer 3

只需使用.checked在JavaScript jQuery的使用.prop('checked')

function run() {    

if(document.getElementById("cb1").checked) {
    document.write("<div>This is check box 1</div>");
}
if(document.getElementById("cb2").checked) {
    document.write("<div>This is check box 2</div>");
}
}

Answer 4

if (document.getElementById('cb1').checked && document.getElementById('cb2').checked) {
    // both are checked
}
else {
   // only one or none are checked
}

正如前面的一個答案中提到的那樣，你不應該使用document.write 。 您可以使用.append(string)向文檔添加內容：

document.append('Both boxes are checked');

JavaScript復選框onclick函數

問題描述

4 個解決方案

解決方案1
2 已采納 2014-02-26 17:05:52

解決方案2
1 2014-02-26 16:57:50

解決方案3
0 2014-02-26 16:59:07

解決方案4
0 2014-02-26 16:59:24

JavaScript復選框onclick函數

問題描述

4 個解決方案

解決方案1 2 已采納 2014-02-26 17:05:52

解決方案2 1 2014-02-26 16:57:50

解決方案3 0 2014-02-26 16:59:07

解決方案4 0 2014-02-26 16:59:24

解決方案1
2 已采納 2014-02-26 17:05:52

解決方案2
1 2014-02-26 16:57:50

解決方案3
0 2014-02-26 16:59:07

解決方案4
0 2014-02-26 16:59:24