checkbox：click事件觸發文本框顯示隱藏

時間 2019-11-06

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script src="jquery.js"></script>
</head>
<body>
<form action="#" id="form">
    <input type="checkbox" name="city" value="南京">南京
    <input type="checkbox" name="city" value="北京">北京
    <input type="checkbox" name="city" value="紐約">紐約
    <input type="checkbox" name="city" value="其餘" id="other" onclick="change()">其餘
    <input type="text" style="display: none" id="txt">
</form>
<script>
//    jQuery
//    $(function () {
//        $("#other").click(function () {
//            if($(this).attr("checked")){
//                $("#txt").css("display","block")
//            }else {
//                $("#txt").css("display","none")
//            }
//        })
//    })
//    原生JS
function change() {
    var other = document.getElementById("other");
    var txt = document.getElementById("txt");
    if (other.checked == true) {
        txt.style.display = "block";
    }else{
        txt.style.display = "none";
    }
}
</script>
</body>
</html>

若是用js改變checkbox的值，onchange不會被觸發。事件通常是監聽用戶的動做，用js改不屬於用戶動做。另：document.getElementById("otherRoute").checked=true;都在js改變checkbox的值了，在這句的後面就執行onchange方法的內容不就好了，就醬

相關標籤/搜索