checkbox 和 radio如何通过jQuery设置checked

最新推荐文章于 2023-07-30 18:21:40 发布
最新推荐文章于 2023-07-30 18:21:40 发布
阅读量880 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kylinah/article/details/52957345
本文介绍了如何使用jQuery来设置和取消设置复选框(checkbox)和单选按钮(radio)的状态。具体包括了使用$.attr()和$.prop()方法来控制元素的checked属性，并提供了示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

checkbox radio通过attr和prop之一设值是无法满足所有的情况，因此在通过jQuery设置checkbox和radio为选中状态需要通过以下两句来设置


//设置的值可为：true/false 或者 checked
$checkbox.attr("checked", true);
//prop设置true或false，取值也是true或false
$checkbox.prop("checked", true);
//去除选中状态
$checkbox.removeAttr("checked");
$checkbox.prop("checked", false);



                

        

    

    
  



    



                



	

		

			

				
					
初始化radio的checked属性值(根据另外radio的checked) 比如编辑页面初始化数据

				
			

			

				

					qq_33994014的博客
				

				

					05-24
					
					534
					
				

			

		

		

			
				
$("input[name=update_sex][value='男']").attr("checked", data.sex == '男' ? true : false);
$("input[name=update_sex][value='女']").attr("checked", data.sex == '女' ? true : false);




			
		

	



                

            
              



	

		

			

				
					
jquery radio设置checked但按钮radio仍然没选中的js处理方式

					
最新发布

				
			

			

				

					2401_84091289的博客
				

				

					04-07
					
					486
					
				

			

		

		

			
				
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

			
		

	



              


  
              

                


	

		

			

				
					
jquery radio  checkBox操作（转）

				
			

			

				

					taiyuanbj的博客
				

				

					11-04
					
					192
					
				

			

		

		

			
				
[code="js"]
radio

1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值

2. $("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发

3. $("#text_id").blur(function(){...

			
		

	





	

		

			

				
					
jquery radio checked动态设置radio选中

				
			

			

				

					nongyan90的专栏
				

				

					06-08
					
					4082
					
				

			

		

		

			
				
有时会遇到这样的问题，修改用户资料时根据数据库提供的数据动态设置radio的checked 值，这里总结了一下动态设置radio值的方法：

radio选中
$("input[name=test][value=34]").attr("checked",true);//value=34的radio被选中
$("input[id=testid][value=34]").attr("checke

			
		

	



		

			
		



	

		

			

				
					
jQuery实现自定义checkbox和radio样式

				
			

			

				

					10-23
				

			

		

		

			
				
jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术，它可以帮助开发者摆脱浏览器默认样式，创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。  首先，我们要理解...

			
		

	





	

		

			

				
					
jQuery根据ID获取input、checkbox、radio、select的示例

				
			

			

				

					01-19
				

			

		

		

			
				
$('input[name=MyName]:checked).each(function(index, element) { xxx.push($(element).val()); // 或者 xxx.push($(this).val()); }); 注意：这里没有基于ID，有些不严谨。如果你的checkbox元素是某个容器的子元素...

			
		

	





	

		

			

				
					
jQuery设置和获取select、checkbox、radio的选中值方法

				
			

			

				

					11-28
				

			

		

		

			
				
在网页开发中，jQuery库为开发者提供了方便快捷的方式来操作HTML元素，包括常见的表单控件如select、checkbox和radio。熟练掌握这些控件的设置和获取选中值的方法，能够显著提升开发效率。下面我们将详细讲解jQuery...

			
		

	





	

		

			

				
					
 jQuery美化radio和checkbox

				
			

			

				

					11-08
				

			

		

		

			
				
总结来说，jQuery美化radio和checkbox主要是通过CSS自定义样式或者利用jQuery插件实现。自定义CSS需要对CSS有较深的理解，而使用插件则更简便，但可能需要额外的资源加载。无论哪种方式，都能帮助开发者创造出符合...

			
		

	





	

		

			

				
					
Javascript/jQuery动态修改radio/checkbox值

				
			

			

				

					zxygww的专栏
				

				

					07-25
					
					5266
					
				

			

		

		

			
				
HTML代码：
"checked" />1
0



Javascript代码：
function setInputValue(nameStr, type, value){
var selector = "input[name="+nameStr+"]";//属性选择器，name

if(type != null) {
if(type == "radio" || type =

			
		

	





	

		

			

				
					
RadioButton的check改变的时候

				
			

			

				

					weixin_34174422的博客
				

				

					06-02
					
					388
					
				

			

		

		

			
				
https://stackoverflow.com/questions/8095256/asp-net-radio-button-change
You'll need to specify the attribute and value AutoPostBack="true" in order to tell ASP.NET that changing of that element shoul...

			
		

	





	

		

			

				
					
jquery获取和设置radio,check,select选项（转）

				
			

			

				

					weixin_34061042的博客
				

				

					03-09
					
					219
					
				

			

		

		

			
				

select控件选项
1,获取select选中的value值
      $("#selectID").val();
2,获取select选中的text的值
 $("#selectID").find("option:selected").text()
3,设置select的第几项为当前选中项
$("#selectID").attr("value",2);//设置第二项为当前选中项
...

			
		

	





	

		

			

				
					
JQuery操作单选按钮Radio和复选框checkbox

				
			

			

				

					哈
				

				

					07-30
					
					559
					
				

			

		

		

			
				
设置第一个Radio为选中值：

设置最后一个Radio为选中值：

根据索引值设置任意一个radio为选中值：

根据Value值设置Radio为选中值

删除指定Value值的Radio

删除第几个Radio

8、遍历Radio

			
		

	





	

		

			

				
					
radio通过Jq动态设置checked属性无效，radio未选中

				
			

			

				

					wylb226的专栏
				

				

					01-20
					
					6141
					
				

			

		

		

			
				
在做网站后台应用程序的时候，遇到这么一个问题，通过Jq动态设置radio的checked属性，居然无效，各种纠结，各种纳闷，于是乎各种百度，各种问问提问，最后在浏览其他帖子的时候，终于被我发现解决问题的办法拉，那个心情贼拉的好呀



在我搜索的过程的过程的，发现网上大多数提供动态加载checked属性是通过Jq库的attr方法，


代码如下：







1


			
		

	





	

		

			

				
					
点击改变input radio checked的值

				
			

			

				

					weixin_40682730的博客
				

				

					07-18
					
					3039
					
				

			

		

		

			
				
<style>

a{

border: 1px solid;

display: inline-block;

width: 100px;

height: 100px;

background: red;

}

</style>

 

<div class="commodity_level">

<dl>

<dt>级别：<..

			
		

	





	

		

			

				
					
js控制修改radio选中项

					
热门推荐

				
			

			

				

					berry sky
				

				

					05-03
					
					4万+
					
				

			

		

		

			
				
function change(radio_oj,aValue){//传入一个对象
   for(var i=0;i
        if(radio_oj[i].value==aValue){  //比较值
            radio_oj[i].checked=true; //修改选中状态
            break; //停止循环
        }
   }

			
		

	





	

		

			

				
					
JavaScript设置修改radio的checked属性不生效

				
			

			

				

					qq_41653487的博客
				

				

					05-17
					
					1470
					
				

			

		

		

			
				
**
JavaScript设置修改radio的checked属性不生效
**
需要使用prop()来设置固有属性
atr()和prop()的区别
1、attr()方法主要是用来处理自定义的DOM属性;
2、prop()方法主要是用来处理本身就带有的固有属性（W3C标准里面说明的属性,或者在IDE里面能够智能提示的属性，都是固有属性）
具有true和false属性的属性，如checked selected disabled需要使用prop()， 其他的使用attr()
例如： $( “input” ).pro

			
		

	





	

		

			

				
					
jquery单选框redio设置checked属性无效的原因

				
			

			

				

					草木红的博客
				

				

					01-26
					
					1130
					
				

			

		

		

			
				
jquery设置标签本身的属性使用prop()，设置自定义属性使用attr()。
下面用例：点击选中复选框，默认选择单选框的“是”，取消复选框之后，取消单选框的选择。
<div style="border:1px solid #ddd;padding-bottom: 20px;">
    <h5>jquery控制，</h5>
    <small style="display: block;">当复选框选中时，默认选中auth中的‘是’，复选框不选中，单选框

			
		

	





	

		

			

				
					
JQuery实现checkbox和radio选择器操作演示

				
			

			

				

					
				

			

		

		

			
				
通过对checkbox和radio的操作，可以实现一些常见的用户界面功能，比如表单验证、用户选项选择等。  详细知识点：  1. JQuery基础知识 JQuery是目前最流行的JavaScript库之一，通过减少代码量来简化HTML文档操作、...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值