选择复选框显示DIV

最新推荐文章于 2023-06-19 22:38:58 发布
最新推荐文章于 2023-06-19 22:38:58 发布
阅读量368 收藏 1
点赞数
文章标签： javascript ViewUI 
 

<html>
<head><title></title></head>
<script>
 

//支付宝担保选择触发
function chedb(obj){

if(obj.checked==true){
document.getElementById("zfbfk").style.display="block";
}else{
document.getElementById("zfbfk").style.display="none";
}
}
</script>
 

<body>
 

<div id="zfbdbdiv" style="display: block">
 <input type="checkbox" id="zfbdb" οnclick="chedb(this)" />支付宝担保交易
 </div>
<div id="zfbfk" style="display: none">
 <li><a href="#" onClick="saveOrderFollow();submitalipayform()">支付宝付款</a></li>
 </div>
</body>
</html>

                

        

        




    




    

      

        

            

              
                
                  iteye_17686
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jquery点击输入框时弹出div层复选框勾选输入的内容

				
			

			

				

					06-18
				

			

		

		

			
				
点击输入框 弹出div层 div层中放入复选框勾选值 点击复选框 值放入输入框内

			
		

	



                

              
                



	

		

			

				
					
使用div创建选取框

				
			

			

				

					weixin_34212762的博客
				

				

					04-09
					
					185
					
				

			

		

		

			
				
使用div实现了选取框效果.
代码如下

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>myCanvasTest</title>
  5     <style type="text/css">
  6        ...

			
		

	



                


  
              

                


	

		

			

				
					
div模拟选择框

				
			

			

				

					897371388
				

				

					11-02
					
					135
					
				

			

		

		

			
				
html原有标签可以满足我们需求，有时为了使界面更加美观，就需要自己写出来一些列标签供使用，这次项目就有这个要求了，模拟选项框

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;h...

			
		

	





	

		

			

				
					
checkbox多选框选中执行js做动作&jq调用显示或隐藏div

				
			

			

				

					wwppp987的博客
				

				

					07-23
					
					1147
					
				

			

		

		

			
				
<script>
function changeHref(obj) {
  var target = document.getElementById("aPay"); // 查找目标对象
  target.href = "https://www.abc.com/ok.htm?pay=" + obj.value; // 修改A标签
}
</script>
<table&...

			
		

	



		

			
		



	

		

			

				
					
jquery+css+div实现select选择框样式

				
			

			

				

					07-15
				

			

		

		

			
				
调用方式：$.divselect("#divselect","#inputselect"); "#divselect" 这是哪个模拟列表的盒子的ID，"#inputselect"这个是选择以后给 id="inputselect" 的input隐藏域赋值的哦。 懂一点程序的都明白为啥要赋值了。意思就是给这个隐藏域赋值就相当于用丑陋的select下拉列表得到一个值是同理的。下拉列表的功能无非也就是传一个值提交过去。
此form select下拉控件是使用div+jq+css实现，其表单功能正常使用，能正常传值。根据需要修改css背景、css宽度、css高度等图片或css样式实现自己想要的select下拉菜单表单美化效果。演示地址：http://www.bcty365.com/content-73-325-1.html

			
		

	





	

		

			

				
					
JS实现点击复选框变更DIV显示状态的示例代码

				
			

			

				

					10-18
				

			

		

		

			
				
下面小编就为大家分享一篇JS实现点击复选框变更DIV显示状态的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
CSS自定义绿色复选框按钮样式

				
			

			

				

					09-24
				

			

		

		

			
				
- `<label>`：用于显示复选框的视觉样式。  ##### 3.2 CSS样式 为了实现自定义的绿色复选框，我们需要为不同的元素应用相应的CSS样式。  - **整体样式**：设置`.i-check`的基本尺寸和位置属性。 ```css .i-check {  ...

			
		

	





	

		

			

				
					
隐藏layui数据表格表头的checkbox复选框

				
			

			

				

					12-02
				

			

		

		

			
				
具体来说，我们需要找到表头对应的`<th>`标签，并定位到其中包含复选框的`<div>`标签，然后将其替换为一个空的`<div>`标签，以此来移除复选框的显示。下面将详细解释具体步骤及代码实现。  #### 实现步骤  1. **定位...

			
		

	





	

		

			

				
					
js实现当复选框选择匿名登录时隐藏登录框效果

				
			

			

				

					10-23
				

			

		

		

			
				
`的目的是根据复选框是否被选中来改变其父元素（即`<div>`）的类名。如果复选框被选中（`this.checked`为`true`），则添加类名`a`；反之，移除类名`a`。  接下来，我们看CSS部分：  ```css .a #login, #uname {  ...

			
		

	





	

		

			

				
					
使用div实现的复选选择控件

				
			

			

				

					09-27
				

			

		

		

			
				
输入多个数据时比较麻烦，如果使用下拉框，也只能输入单个数据，如果想输入多个数据就只能使用别的弹出框的方式，这样界面不好看，同时实现起来也比较麻烦，这个控件使用div来完成对数据复选的选择输入。

			
		

	





	

		

			

				
					
div手写复选框样式

					
最新发布

				
			

			

				

					weixin_60906876的博客
				

				

					06-19
					
					167
					
				

			

		

		

			
				
divborder: 0;.feature {*/

			
		

	





	

		

			

				
					
javascript设置某DIV下复选框checkbox

				
			

			

				

					Len的专栏
				

				

					04-26
					
					414
					
				

			

		

		

			
				
主要用到dom的两个函数document.getElementById(id)和document.getElementsByTagName(name),希望对写复选框全选的虾们有些许帮助。



   
    
        全选
        
        
        
    
    
    
    
    
        全选
   ...

			
		

	





	

		

			

				
					
JavaScript操作复选框显示/隐藏DIV内容

				
			

			

				

					一念执着
				

				

					01-27
					
					4812
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="margin-top: 15px">
			<!-- 机种下拉单 --&g...

			
		

	





	

		

			

				
					
勾选复选框时，获取复选框的内容显示在页面上

				
			

			

				

					weixin_43853571的博客
				

				

					04-26
					
					3509
					
				

			

		

		

			
				
勾选复选框时，获取复选框的内容显示在页面上
勾选复选框时，获取复选框的内容显示在页面上

			
				房间选择
				
			
		
	<!-- 房间选择列表 start -->
	<div class="room-list">
		<div class="list">
			<div class="checked2 check">
				&...

			
		

	





	

		

			

				
					
JS多个复选框点击显示与隐藏，复选框点击事件

				
			

			

				

					qq_31647655的博客
				

				

					01-19
					
					1731
					
				

			

		

		

			
				
JS复选框点击事件，多个复选框动态点击显示与隐藏相关模块

			
		

	





	

		

			

				
					
jQuery实现点击DIV同时点击CheckBox，并为DIV上背景色

				
			

			

				

					Master-Pan的专栏
				

				

					12-06
					
					4960
					
				

			

		

		

			
				
直接上代码：



    
    JqueryTest
    
    
	$(document).ready(function () {

		$('input').click(function(e){
			e.stopPropagation();
			var parent = $(this).parent();
			$(this).is(':checked') ? parent.

			
		

	





	

		

			

				
					
复选框checkbox控制多个内容的显示与隐藏

				
			

			

				

					wczhashi的博客
				

				

					07-10
					
					5060
					
				

			

		

		

			
				
当点击复选框的时候，对应的内容会根据复选框的选中与否进行展示，checkbox复选款可动态循环增加，对应的内容展示区的内容要与复选框一一对应
代码如下：
样式表部分：


	.b4,.b2,.b3{ display: none}
	.show{ display: block}



html部分：

		
			a1
			a2
			a3
			a4
		
	
	
	b1
	b2

			
		

	





	

		

			

				
					
前端框架（二）DIV多选复选框框的封装和MySql数据库存取

				
			

			

				

					weixin_34007906的博客
				

				

					06-18
					
					456
					
				

			

		

		

			
				
图可以包含的寓意和含义是文字不能比拟的，先有一个效果图你也就知道这篇文章的主要内容是关于什么问题的，省去了一大堆文字的累述，看下面这张图：
 

 这个需求就是要实现某个人具有另外一种特性，具有多对多关系，比如某个人既喜欢运动、有喜欢上网等等，这样类似的需求在几乎在每个系统里面都有设计，而且很多框架都实现了这样的功能，如果让自己去实...

			
		

	





	

		

			

				
					
下拉框选择完之后有不同的复选框显示

				
			

			

				

					05-10
				

			

		

		

			
				
好的，你需要在页面上设置一个下拉框和不同的复选框。当用户选择下拉框中的选项时，不同的复选框将被显示或隐藏。

你可以使用 JavaScript 来完成这项任务。首先，你需要编写一个函数，该函数将检查下拉框中选择的选项，并显示或隐藏与该选项相关联的复选框。以下是一个简单的示例：

```html
<select id="mySelect" onchange="displayCheckboxes()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<div id="checkboxes">
  <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
  <label for="checkbox1">Checkbox 1</label><br>
  <input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2">
  <label for="checkbox2">Checkbox 2</label><br>
  <input type="checkbox" id="checkbox3" name="checkbox3" value="checkbox3">
  <label for="checkbox3">Checkbox 3</label><br>
</div>

<script>
function displayCheckboxes() {
  var selectBox = document.getElementById("mySelect");
  var checkboxes = document.getElementById("checkboxes").getElementsByTagName("input");

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].style.display = "none";
  }

  if (selectBox.value === "option1") {
    document.getElementById("checkbox1").style.display = "block";
  } else if (selectBox.value === "option2") {
    document.getElementById("checkbox2").style.display = "block";
  } else if (selectBox.value === "option3") {
    document.getElementById("checkbox3").style.display = "block";
  }
}
</script>
```

在此示例中，我们首先创建了一个带有选项的下拉框和一组复选框的 HTML 结构。然后，我们定义了一个名为 `displayCheckboxes()` 的函数，在该函数中，我们获取下拉框和复选框的引用，并根据下拉框中选择的选项显示或隐藏相应的复选框。

在 `displayCheckboxes()` 函数中，我们首先将所有复选框的显示样式设置为 "none"，以隐藏所有复选框。然后，我们使用 if/else if 语句检查选择的下拉框选项，并将与该选项相关联的复选框的显示样式设置为 "block"，以显示该复选框。

希望这可以帮助到你。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值