js获得checkbox选中值及input后面的文本

最新推荐文章于 2024-05-16 16:53:58 发布
最新推荐文章于 2024-05-16 16:53:58 发布
阅读量2.5w 收藏 11
点赞数 4
文章标签： checkbox javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014079773/article/details/51865596
版权

js如何获得多个checkbox选中的值及input后面所跟的文本

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>验证js获得多个checkbox选中值及input后面所跟文本</title>
   <script type="text/javascript">
       function clickBjjb() {
	   var checkboxValue= new Array();
	   var checkboxText= new Array();
	   var checkboxStr=document.getElementsByName("bjjb");  
	   for(var i=0; i<checkboxStr.length; i++){
		if(checkboxStr[i].checked){
	            //alert(checkboxStr[i].value+","+checkboxStr[i].nextSibling.nodeValue);
		    checkboxValue.push(checkboxStr[i].value);
                    checkboxText.push(checkboxStr[i].nextSibling.nodeValue);
		 }
	    } 
	    //输出值和文本
	     alert("checkboxValue:"+checkboxValue);
             alert("checkboxText:"+checkboxText);
           //把获得的数据转换为字符串传递到后台           
           checkboxValue=checkboxValue.toString();
         checkboxText=checkboxText.toString();
         window.location='某Action/netWorkingUpdate?checkboxValue='+checkboxValue+"&checkboxText="+checkboxText;

  } 
</script> 
</head> 
<body> 
   <form id="checkboxform" method="post" action="">
    <input type="checkbox" name="bjjb" value="1">交通事故<br>
    <input type="checkbox" name="bjjb" value="2">自然灾害<br>
    <input type="checkbox" name="bjjb" value="3">恶劣天气<br>
   <input type="checkbox" name="bjjb" value="4">严重违法行为<br>
   <input type="checkbox" name="bjjb" value="5">路面损毁<br>
  <input type="button" οnclick="clickBjjb()" value="报警级别" />
 </form> 
</body>
</html>








 

 

后台获得参数为：
 

//获得的均为数组值。
 
 

String checboxValues=request.getParameter("checboxValue");
 

String checboxTexts=request.getParameter("checboxText");
 
 

//得到每个具体值
 
 

String checboxValue=checboxValues.split(",");
 
 

String checboxText=checboxTexts.split(",");
 
 

备注：
 

1：nextSibling是获得当前对象的下一个对象，nodeValue是返回一个节点的值
 

2：使用该方法必须保证文本值在input后面，否则checkboxStr[i].nextSibling.nodeValue获取不到文本值
 


 

                

        

        

    




    

      

        

            

              
                
                  陌上桑花开花
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    11
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JS和后台获取复选框(checkbox)选中项后的文本内容

				
			

			

				

					梦痕
				

				

					12-13
					
					1万+
					
				

			

		

		

			
				
无标题页
    
 


//单选与全选的判断
function check(e, allName){
       var all = document.getElementsByName(allName)[0];    //获取全选复选框
       if(!e.checked){
           //没被选中全选复选框置为false;
           all.checked

			
		

	



                

              
                



	

		

			

				
					
checkbox批量选中,获取选中项的值的简单实例

				
			

			

				

					09-02
				

			

		

		

			
				
批量选中Checkbox并获取选中项的值是一项常见的需求，尤其在处理表格数据时。本文将通过一个简单的HTML和JavaScript实例来详细讲解如何实现这一功能。  首先，我们创建一个包含多行的表格，每行有四个列：ID、...

			
		

	



                


  
              

                


	

		

			

				
					
js获取checkbox中所有选中值及input后面所跟的文本

					
热门推荐

				
			

			

				

					啊恒的专栏
				

				

					01-20
					
					3万+
					
				

			

		

		

			
				
jsfunction aa(){    var r=document.getElementsByName("r");      for(var i=0;i         if(r[i].checked){         alert(r[i].value+","+r[i].nextSibling.nodeValue);       }    }      }abcdefghij   

			
		

	





	

		

			

				
					
使用JQuery获取被选中的checkbox的value值 以及全选、反选

					
最新发布

				
			

			

				

					m0_72642319的博客
				

				

					05-16
					
					328
					
				

			

		

		

			
				
使用JQuery获取被选中的checkbox的value值 以及全选、反选

			
		

	



		

			
		



	

		

			

				
					
js 获取checkbox的文本值 .

				
			

			

				

					jspvsjsj的专栏
				

				

					03-15
					
					1471
					
				

			

		

		

			
				
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


ϞҪ͢τյ

function tijiao()
{
  
 
var   docTemp=document.thisform.checkbox; 
for   (i=0;i 
if(docTe

			
		

	





	

		

			

				
					
CheckBox的使用(二):获取选择的文本内容

				
			

			

				

					多看多听多总结
				

				

					04-07
					
					3394
					
				

			

		

		

			
				
package com.example.androidtest;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.Button;
import android.widget.CheckBox;
import android.view.Vie

			
		

	





	

		

			

				
					
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结

				
			

			

				

					10-24
				

			

		

		

			
				
在JavaScript的库jQuery中，处理HTML表单元素如radio、select和checkbox的选中状态以及获取它们的选中值是常见的需求。以下是一些简洁直接的方法总结，供开发者参考。  对于`radio`单选按钮，要获取选中值，可以使用...

			
		

	





	

		

			

				
					
checkbox 选中一个另一个checkbox也会选中的实现代码

				
			

			

				

					09-02
				

			

		

		

			
				
当需要实现“选中一个 `checkbox` 另一个也会被选中”的功能时，通常会涉及到事件监听和状态同步。这篇教程将详细介绍如何通过 JavaScript（特别是 jQuery 库）来实现这种联动效果。  首先，我们要明白 `checkbox` ...

			
		

	





	

		

			

				
					
bootstrap 设置checkbox部分选中效果

				
			

			

				

					10-20
				

			

		

		

			
				
在上述代码中，`<input type="checkbox">`是实际的复选框，而`<label>`则提供了可点击的文本区域，与复选框关联。  当我们需要根据后台数据动态设置复选框状态时，通常需要将数据库中的数据转换成JavaScript数组，...

			
		

	





	

		

			

				
					
ASP.NET中用js取CheckBoxList中值的方法实例

				
			

			

				

					10-27
				

			

		

		

			
				
在这个实例中，我们将探讨如何使用JavaScript从CheckBoxList控件中获取选中的值，并将这些值以特定格式（在这里是“|”分隔）组合成一个字符串，然后将这个字符串放入文本框，最终用于存储到数据库中进行添加或更新...

			
		

	





	

		

			

				
					
随机生成多个JCheckBox，并获取选择的JCheckBox的文本内容

				
			

			

				

					04-21
				

			

		

		

			
				
在JFrame界面上随机生成多个JCheckBox，并获取选择的JCheckBox的文本内容，作为一个字符串。当取消某个JCheckBox的时候，又把字符串中含有此JCheckBox的文本去掉

			
		

	





	

		

			

				
					
获取select、radio、checkbox的value值以及文本框值

				
			

			

				

					爱生活、爱dota、爱魔兽、爱编程、我不大梦想却很大.请不要叫我修电脑-告诉你我不会,我是--程序员
				

				

					12-23
					
					1404
					
				

			

		

		

			
				
获取被选中的radio值
  
  
  
  
  
  
  
    $(function(){
	   $("#test").click(function(){
	       $(":input[type='checkbox']:checked").each(function(){  //获取被选中的checkbox的value值
			                     aler

			
		

	





	

		

			

				
					
使用nextSibling获取checkbox后面的文本内容，并传给后台

				
			

			

				

					li22356的博客
				

				

					05-19
					
					508
					
				

			

		

		

			
				
获取checkBox的文本值，用逗号隔开传给后台。

代码如下图所示：

<div class="control-group">
	<label class="control-label">所属区:</label>
		<div class="controls">
			<c:forEach items="${areaList}" var="a">
				<input id="manageAreaCode" name="manageAre.

			
		

	





	

		

			

				
					
js选中checkbox赋值给文本框

				
			

			

				

					weixin_30794491的博客
				

				

					10-17
					
					401
					
				

			

		

		

			
				
//js
$(function(){       var name="";       var kmname=[];       var n=       $("input[type=checkbox]").click(function(){           kmname.length=0;                     $("input[name=\"inputcheck\...

			
		

	





	

		

			

				
					
JS获取选中checkbox对应行的input值

				
			

			

				

					cxws110的博客
				

				

					04-28
					
					939
					
				

			

		

		

			
				
JS代码：

//审核亩数
  $("#audit").click(function(){
   var _$id=$("input[type='checkbox'][disabled!='disabled'][class='workid']:checked");//id
   if(_$id.length == 0){
   ...

			
		

	





	

		

			

				
					
JS 获取Radio、CheckBox选中的值与文本

				
			

			

				

					tmaczt的博客
				

				

					09-19
					
					1816
					
				

			

		

		

			
				
获取Radio选中的值
	&amp;lt;input type=&quot;radio&quot; name=&quot;advancedBespeak&quot;  value=&quot;1&quot;&amp;gt;是
	&amp;lt;input type=&quot;radio&quot; name=&quot;advancedBespeak&quot; checked=&quot;

			
		

	





	

		

			

				
					
Jquery操作select,radio,checkBox,获取选中项的值和文本，根据值和文本设置选中项

				
			

			

				

					wangsen2235068的专栏
				

				

					05-10
					
					1万+
					
				

			

		

		

			
				
$(function () {
            //select
            $("#Button1").click(function () {
                var v = $("#selProgram").val();
                alert(v);
            });
            $("#Butto

			
		

	





	

		

			

				
					
input【type="checkbox"】标签与字体对齐

				
			

			

				

					weixin_33825683的博客
				

				

					04-07
					
					265
					
				

			

		

		

			
				
今天分享一个比较实用的技巧，在实际项目中我们会经常遇到表单的input标签多选和单选的问题，但是往往由于标签自身的样式和我们项目的风格很不搭调，就不能实现了，今天就来告诉大家怎么去实现吧。
第一种：利用伪类：（开源中国）



需要注意的是：在页面布局中，还是有input【type=checkbox】的：

它的样式如下所示：


后面就是通过js脚本来控制它去实现了；
...

			
		

	





	

		

			

				
					
我在vue3 如何用js修改input type为checkbox 的是否选中状态

				
			

			

				

					03-24
				

			

		

		

			
				
你可以使用v-model指令来绑定checkbox的选中状态，例如：

```html
<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <label>{{ isChecked ? '已选中' : '未选中' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
    };
  },
};
</script>
```

在上面的代码中，我们使用v-model指令将checkbox的选中状态绑定到isChecked变量上，然后在label中根据isChecked的值来显示相应的文本。当用户点击checkbox时，isChecked的值会自动更新，从而实现了修改checkbox的选中状态。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值