checkbox获取选中行的值

开发过程中遇到获取checkbox的选中行的某个值,代码如下。checkbox只能选中一个,但是找了很多方法都无效,所以就根据checkbox的长度进行判断了。有好的方法,希望不吝赐教。

 

 function getCheckBox(ob){
	  var rowid = $(ob).attr("id") //获取当前行的id
	   console.log("row.id:"+rowid);
	  var len = $("input[name=test]:checked").length; //获取checkbox的选取长度
	  console.log("len"+len);
	  if(len==1){
		  var check = $("input[name=test]:checked");//选中的复选框
		   check.each(function(){//
			   var row = $(this).parent("td").parent("tr");//获取当前行
			    supplierName = row.find("[name='suName']").html();// 行根据选择器获取当前行的某个值
			   supplierId = row.find("[name='id']").html();
			   console.log("suName:"+supplierName);
			   console.log("id:"+supplierId);
				var xx = "#"+id;   
				$("#mdsProcurementPlanTable tbody "+xx).val(supplierName);
		   })
		  $("#pageId").data("pageCurrent",1);
		   jp.post("${ctx}/mds/mdsPurchaseSupplier/updateSupplier",
		    		 {id:id,supplierName:supplierName,supplierId:supplierId},function(data){
		    			 if(data.success){
		    				 jp.success(data.msg);
		    			 }else{
		    				 js.error(data.msg);
		    			 }
		    		 })
		   $("#myModal").modal('hide');
		  }else{
			  alert("只能选择一条");
		  }
	  
	 
   }
   

 

可以通过以下几种方式使用 JavaScript 获取 checkbox 选中。 ### 方法一:通过 `document.getElementsByName` 方法 以下是一个具体的实现示例,结合给定的 HTML 代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取 checkbox 选中</title> </head> <body> <form name="testForm" id="myForm"> <input type="checkbox" name="ids" value="1" />1<br /> <input type="checkbox" name="ids" value="2" />2<br /> <input type="checkbox" name="ids" value="3" />3<br /> <input type="checkbox" name="ids" value="4" />4<br /> <input type="checkbox" name="ids" value="5" />5<br /> <input type="checkbox" name="ids" value="6" />6<br /> <input type="checkbox" name="ids" value="7" />7<br /> <input type="checkbox" name="ids" value="8" />8<br /> <button type="button" onclick="test()">js</button> </form> <script> function test() { var checkboxes = document.getElementsByName('ids'); var selectedValues = []; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { selectedValues.push(checkboxes[i].value); } } console.log(selectedValues); } </script> </body> </html> ``` 在上述代码中,`test` 函数通过 `document.getElementsByName('ids')` 获取所有 name 属性为 `ids` 的 checkbox 元素,然后遍历这些元素,将被选中checkbox添加到 `selectedValues` 数组中,最后打印该数组。 ### 方法二:通过 `querySelectorAll` 方法 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取 checkbox 选中</title> </head> <body> <form name="testForm" id="myForm"> <input type="checkbox" name="ids" value="1" />1<br /> <input type="checkbox" name="ids" value="2" />2<br /> <input type="checkbox" name="ids" value="3" />3<br /> <input type="checkbox" name="ids" value="4" />4<br /> <input type="checkbox" name="ids" value="5" />5<br /> <input type="checkbox" name="ids" value="6" />6<br /> <input type="checkbox" name="ids" value="7" />7<br /> <input type="checkbox" name="ids" value="8" />8<br /> <button type="button" onclick="test()">js</button> </form> <script> function test() { var checkboxes = document.querySelectorAll('input[name="ids"]:checked'); var selectedValues = []; checkboxes.forEach(function (checkbox) { selectedValues.push(checkbox.value); }); console.log(selectedValues); } </script> </body> </html> ``` 在这个例子中,`document.querySelectorAll('input[name="ids"]:checked')` 直接择所有 name 属性为 `ids` 且被选中checkbox 元素,然后使用 `forEach` 方法遍历这些元素,将添加到 `selectedValues` 数组中并打印。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值