jQuery点击按钮或复选框显示、隐藏文本框功能

HAaaaaoy

于 2024-07-17 23:34:52 发布

阅读量364

点赞数 8

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/HAaaaaoy/article/details/140508326

版权

使用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>

HAaaaaoy

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery点击按钮或复选框显示、隐藏文本框功能

首先需要在HTML中引入jQuery库，可以使用链接或者下载本地的jQuery文件。然后，我们可以使用以下代码来监听复选框的选中或取消选中事件。使用 jQuery 来以编程方式将函数附加到按钮上。
复制链接

扫一扫