单选按钮选中与移除input type="radio" 以及复选框等

最新推荐文章于 2024-05-09 15:49:11 发布
最新推荐文章于 2024-05-09 15:49:11 发布
阅读量1.3k 收藏
点赞数
文章标签： iput
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40774743/article/details/79275554
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.father{
width:500px;
height: 400px;
border: 1px solid red;
margin:0 auto;
}
</style>
</head>
<body>
<div class="father">
<label><input type="radio" name="sex" id = "man"  value="1" >男</label>
<label><input type="radio" name="sex" id = "woman" value="2">女</label>
<h2>下拉选框</h2>
<select id = "myselect">
<option value ='1'>我是1</option>
<option value ='2'>我是2</option>
<option value ='3'>我是3</option>
</select>
<h2>复选框</h2>
<p><input type="checkbox" name="vehicle" value="Bike" /> I have a bike11</p>
 <p><input type="checkbox" name="vehicle" value="Car" />I have a bike222</p>
</div>
<script>






//获取选中值，四种方法都可以：
// $('input:radio:checked').val()；
// $("input[type='radio']:checked").val();
// $("input[name='rd']:checked").val();


// var value  = $('input[name="radioName"]:checked').val(); //获取被选中Radio的Value值


// //设置第一个Radio为选中值：
// $('input:radio:first').attr('checked', 'checked');
// // 或者 $('input:radio:first').attr('checked', 'true');


// //设置最后一个Radio为选中值：
// $('input:radio:last').attr('checked', 'checked'); 
// //或者$('input:radio:last').attr('checked', 'true');


// //根据索引值设置任意一个radio为选中值：
// $('input:radio').eq(索引值).attr('checked', 'true');
// ///索引值=0,1,2....


// //根据Value值设置Radio为选中值
// $("input:radio[value='rd2']").attr('checked','true');


// //删除Value值为rd2的Radio
// $("input:radio[value='rd2']").remove();


// //删除第几个Radio
// $("input:radio").eq(索引值).remove();
// //索引值=0,1,2....


// //遍历Radio


// $('input:radio').each(function(index,domEle){


 


     //写入代码


// });
// 下拉选框
// $("#myselect").change(function(){
// var aa = $("#myselect").val();
// console.log(aa);
// })
//复选框vehicle
// var bb = $("input[type='checkbox']:checked").val();
// console.log(bb);
$("input[type='checkbox']").eq(1).prop("checked",true)










</script>


</body>
</html>
yakunyang（2016）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现iPhone界面风格的单选框和复选框按钮实例
11-27
在本实例中，我们将探讨如何使用JavaScript，特别是jQuery库，来实现模仿iPhone界面风格的单选框（radio）和复选框（checkbox）按钮。这个方法通过CSS样式和JavaScript事件处理来达到美观的效果，使传统的HTML表单...
jQuery表单复选框与单选框美化特效
06-10
复选框（`<input type="checkbox">`）允许用户在多个选项中选择一个或多个，而单选框（`<input type="radio">`）则让用户在多个互斥的选项中选择一个。这些元素默认样式通常较为单调，不符合现代网页设计的需求。 ...
html中input(radio,checkbox)取消/选中
GoodIdea
02-20 1813
$("input:checkbox:checked").length;查看个数 $("#XX_XXX").prop("checked",true);选中 $("#XX_XXX").removeAttr("checked");取消
radio去除所有选中按钮，checkbox去除所有选择按钮
西门吹吹吹雪
09-26 1730
radio去除所有选中按钮 $("input[type='radio']").attr("checked", false); checkbox去除所有选择按钮 $("input[name='provinceBox']").attr("checked", false);
单选按钮选中后取消
最新发布
weixin_46389242的博客
05-09 358
单选按钮选中后可取消，解决radio代码添加了选中效果，页面没有选中效果
jQuery 移除单选框的选中状态
sinat_18132365的专栏
05-27 3311
function selecto(){ $('input[name="aa"]').each(function() {     $(this).removeAttr("checked"); });  }
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
weixin_58070962的博客
08-14 2979
单选按钮（Radio Button）是一种常见的HTML表单元素，用于让用户在一组选项中选择单个选项。每个单选按钮通常与一个相关的文本标签相连，以便用户知道每个选项的含义。radio单选按钮和Checkbox复选框都是制作试卷很方便的好工具好方法，单选按钮还有的作用是让用户在一组选项中选择一个选项，并将其值作为表单数据传递给后端进行处理。它可以用于数据筛选、选项说明以及用户界面控制等方面。
Jquery input type=radio 的一些常用用法
SFC2014的博客
05-24 221
HTML代码： <table width="100%" border="0" cellspacing="0" cellpadding="0" style=" margin-left:12px;"> <tr> <td align="right" width="2%" ><input type="radio" name="n1" i...
jQuery单选按钮和复选按钮美化效果
06-10
"jQuery单选按钮和复选按钮美化效果"提供了一种方法，可以让你的网页中的单选按钮（radio）和复选按钮（checkbox）看起来更加精致，提升用户体验。本文将深入探讨这个主题，讲解如何利用jQuery和CSS实现这一效果。 ...
使用AngularJS处理单选框和复选框的简单方法
12-09
在AngularJS中，处理单选框（radio buttons）和复选框（checkboxes）是非常直观且高效的。AngularJS的核心特性之一就是双向数据绑定，这使得表单验证和管理变得异常简单。本文将深入探讨如何利用AngularJS将这些交互...
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
01-19
各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法。 遍历option和添加、移除optionfunction changeShipMethod(shipping){ var len = $(“select[@name=ISHIPTYPE] option”)....
点击按钮实现radio选中和取消(attr与prop的区别)
old_hu的备忘录
05-13 200
radioclick() { $('.radio1').prop('checked',true) √√√√√√√ $('.radio2').prop('checked',false) √√√√√√√ 当要改变其状态时,如果是自带的状态要用prop,不然,不然你自己试试就知道了 ...
js input radio点击事件
幽篁晓筑的博客
06-15 8452
html代码： <input type="radio" name="myname" value="1" />1 <input type="radio" name="myname" value="2" />2 js代码： // 点击事件change $('input[type=radio][name=myname]').change(function (...
js移除input单选框（radio）选中效果
jpjp2020的博客
07-28 9454
上午做类似于这样一个单选框效果，需要把弹窗内单选框后的文本赋值到弹窗父页面。 可是在js中移除最开始是这么做的。 $('.chose-box-li').children('input').attr('checked', 'true') $(this).children('input').attr('checked', 'true'); 看上去好像没什么问题，可是在开发者模式中查看： ...
修改单选框，复选框默认样式 input[type='radio'] input[type="checkbox"]
啦啦迪的技术日常
08-24 4009
由于业务需求，本样式中修改的单选框和复选框的样式是一样的。 效果图：         复选框                                                           单选框                                      1.标签 &lt;!--复选框标签--&gt; &lt;ul class="format"&...
如何修改input中[type="radio"]和[type="checkbox"]的样式
Abbey_qi的博客
08-14 2319
一、利用css3伪元素实现样式修改 思路： 1. 可以为<label>元素添加生成性内容(伪元素)，并基于复选框的状态来为其设置样式； 2. 然后把真正的复选框隐藏起来； 3. 最后把生成内容美化一下。 解决方法： 美化checkbox 1. 一段简单的结构代码： <input type="checkbox" id="awesome" /> <lab...
页面初始化设置单选框radio默认选中，清空默认选中
热门推荐
路西法Lucifer
06-29 1万+
前言:     页面初始化设置单选框radio默认选中，根据公司已有的标签属性来写的，坑，刚开始一直获取不到这个圆框框，搞了半天，终于搞定了。 浏览器截图： js代码：     产品的name是由uuid生成的； $(function () { //初始化详情页社保默认选中有,填写页社保选中清空 $(document).ready(function(){ ...
单选按钮清空选中
码灵的博客
09-19 1万+
$('input[type=radio][name="chewu"]:checked').prop("checked", false);
jquery解决input[type=radio]点击选中取消
weixin_33989780的博客
01-16 1334
input[type=radio] 点击选中后，再次点击选中项，默认是不会取消的。用jquery实现点击选中取消的代码： 　　 <input type="radio" name="hobby"> 篮球 <input type="radio" name="hobby"> 足球 <input type="radio" name="hobby"> 网球 ...
input type=radio
08-25
input type=radio是HTML中的一个表单元素，用于创建单选按钮。通过设置type属性为radio，可以将多个单选按钮归为一组，使用户只能选择其中的一个选项。 在HTML代码中，可以使用<input>标签来创建单选按钮。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值