使用jQuery监听事件
首先需要在HTML中引入jQuery库,可以使用链接或者下载本地的jQuery文件
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
使用 jQuery 来以编程方式将函数附加到按钮上
按钮触发事件
button onClick="showinput()
function showinput() {
}
复选框触发事件
然后,我们可以使用以下代码来监听复选框的选中或取消选中事件
$(document).ready(function() {
$('#myCheckbox').change(function() {
if ($(this).is(':checked')) {
// 复选框被选中时执行的操作
console.log("复选框被选中");
} else {
// 复选框取消选中时执行的操作
console.log("复选框取消选中");
}
});
});
完整效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用JQuery单击一个按钮显示/隐藏一个文本框</title>
<script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><button onClick="showinput()">点击显示、隐藏</button></p>
<p><input type="checkbox" id="netcross" onchange="showinput_2()">复选框点击显示、隐藏</p>
<input type="text" placeholder="框1" value="" id="ttput" style="display:none"/>
<input type="text" placeholder="框2" value="" id="ttput2" style="display:none"/>
<script>
function showinput() {
if($("input").is(":hidden")) {
$('#ttput').show();
$('#ttput2').show();
}
else{
$('#ttput').hide();
$('#ttput2').hide();
}
}
function showinput_2() {
var checkbox = document.getElementById("netcross");
if (checkbox.checked) {
$('#ttput').show();
$('#ttput2').show();
} else {
$('#ttput').hide();
$('#ttput2').hide();
}
}
</script>
</body>
<html>