|
单选框 radio总结： 一、页面样式截图： <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder1" value="1"/> <label for="killOrder1">是</label> </div> <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder2" value="0" checked/> <label for="killOrder2">否</label> </div> 使用label标签可以点击文字就能选中单选框或者是取消选择单选框 label标签的两种使用方法： https://blog.csdn.net/qq_40015157/article/details/110850331 二、js原生 1、js原生获取选中的值 var tesObj = document.getElementsByName("killOrder"); //获取选中的值 for(var i=0; i < tesObj.length; i++){ if (tesObj[i].checked==true){ alert(tesObj[i].value+' 是选中的value值'); break; } } 2、js原生设置选中 var tesObj = document.getElementsByName("killOrder"); //设置value值为0选中 for(var i=0; i < tesObj.length; i++){ if (tesObj[i].value=="0"){ tesObj[i].checked = true; break; } } 三、jquery 1.获取值 $("input[name='killOrder']:checked").val(); $('input:radio:checked').val(); $("input[type='radio']:checked").val(); $(":radio[checked]").each(function(radio){alert($(this).val()); 注意：有时attr() 无法起到作用，attr() 与 prop() 的区别详见文章。 https://blog.csdn.net/qq_40015157/article/details/110823718 2.设置第一个radio为选中值： $('input:radio:first').prop('checked', 'checked'); $('input:radio:first').prop('checked', true); $('input:radio:first').attr('checked', 'checked'); $('input:radio:first').attr('checked', true); 3.设置最后一个radio为选中值： $('input:radio:last').prop('checked', 'checked'); $('input:radio:last').prop('checked', true); $('input:radio:last').attr('checked', 'checked'); $('input:radio:last').attr('checked', true); 4.根据索引值设置任意一个radio为选中值： $('input:radio').eq(索引值).prop('checked', true);//索引值=0,1,2.... $('input:radio').slice(1,2).prop('checked', true); $('input:radio').eq(索引值).attr('checked', true);//索引值=0,1,2.... $('input:radio').slice(1,2).attr('checked', true); 5.根据value值设置radio为选中值 $("input:radio[value='2']").prop('checked', true); $("input[value='1']").prop('checked', true); $("input[name='killOrder'][value='1']").prop("checked", "checked"); let v = 1;//变量 $("input[name='killOrder'][value='" + v + "']").prop("checked", true); $("input:radio[value='2']").attr('checked', true); $("input[value='1']").attr('checked', true); 6.删除value值为2的radio $("input:radio[value='2']").remove(); 7.删除第几个radio $("input:radio").eq(索引值).remove();//索引值=0,1,2.... //如删除第3个radio:$("input:radio").eq(2).remove(); 8.遍历radio $('input:radio').each(function(index,domEle){ //写入代码 }); 9.修改单选框样式 input[type="radio"] + label::before { content: "\a0"; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; text-indent: .15em; margin-bottom: 4px; border: 1px solid #CCCCCC; } input[type="radio"]:checked + label::before { background-color: #4A90E2; background-clip: content-box; padding: 2px; } input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); } .radio-inline{ padding-left: 0; } input[type=radio][disabled]:checked + label::before{ background-color:#CCCCCC; background-clip: content-box; padding: 2px; } 复选框总结 ： https://blog.csdn.net/qq_40015157/article/details/110819778 全选反选 ：https://blog.csdn.net/qq_40015157/article/details/110661715 https://blog.csdn.net/qq_40015157/article/details/80693777 输入框： https://blog.csdn.net/qq_40015157/article/details/80692543 ———————————————— 版权声明：本文为CSDN博主「程序媛zcx」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_40015157/article/details/80692296 JQuery控制radio选中和不选中方法总结一、设置选中方法 $("input[name='名字']").get(0).checked=true; 二、设置选中和不选中示例 <input type="radio" value="0" name="jizai" id="0"/>否 通过name $("input:radio[name="analyfsftype"]").eq(0).attr("checked",'checked'); 通过id $("#tradeType0").attr("checked","checked"); 三、另一种设置选中方法 <script type="text/javascript"> 您的性别： <input type="radio" name="sex" value="1" <s:if test="user.sex==1">checked</s:if>/>男 四、根据值设置radio选中 $("input[name='radio_name'][value='要选中Radio的Value值']").attr("checked",true); //根据Value值设置Radio为选中状态 五、使用prop方法操作示例 $('input').removeAttr('checked'); JQuery radio（单选按钮）操作方法汇总随着Jquery的作用越来越大，使用的朋友也越来越多。在Web中，由于CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高，就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快，代码的写法也改变了许多，以下Jquery代码适query1.4版本以上。
1.获取选中值，三种方法都可以： $('input:radio:checked').val()； 2.设置第一个Radio为选中值： $('input:radio:first').attr('checked', 'checked'); 或者 $('input:radio:first').attr('checked', 'true'); 注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true) 3.设置最后一个Radio为选中值： $('input:radio:last').attr('checked', 'checked'); 或者 $('input:radio:last').attr('checked', 'true'); 4.根据索引值设置任意一个radio为选中值： $('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true'); 5.根据Value值设置Radio为选中值 $("input:radio[value='rd2']").attr('checked','true'); 或者 $("input[value='rd2']").attr('checked','true'); 6.删除Value值为rd2的Radio $("input:radio[value='rd2']").remove(); 7.删除第几个Radio $("input:radio").eq(索引值).remove();索引值=0,1,2.... 如删除第3个Radio:$("input:radio").eq(2).remove(); 8.遍历Radio $('input:radio').each(function(index,domEle){ //写入代码 }); jquery判断单选按钮radio是否选中的方法本文实例讲述了jquery判断单选按钮radio是否选中的方法。分享给大家供大家参考。具体如下： html代码如下：
1. 加载页面的时候获取id
2.点击按钮的时候获取id
|
|
|
