radio/checkbox 点击阻止默认选中/未选中事件

最新推荐文章于 2024-05-17 09:35:25 发布
最新推荐文章于 2024-05-17 09:35:25 发布
阅读量2.1k 收藏 2
点赞数 1
文章标签： git javascript c# ViewUI
原文链接：http://www.cnblogs.com/zhu-shixin/p/6782222.html
版权

因需求会出现，1. 可以不选任何option;2. 选择只可以选择其中一项； 而这个需求，目前的radio和checkbox都不能满足此情况；

在研究的时候遇到了  radio/checkbox 点击阻止默认选中/未选中事件 此问题，链接的文章和我想的差不多可以参考。

 

我也写了一段js，用radio实现以上的需求（当然也可以使用checkbox去实现），git地址

基本想法就是通过给radiao定义一个属性的switch开关，去js操作radio的checked的状态，避免用其本身的checked属性（因为他会导致问题）。

转载于:https://www.cnblogs.com/zhu-shixin/p/6782222.html

weixin_30333885
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript/HTML—FORM用户输入/提交数据的图形界面
03-18
对于表单提交，我们可以监听`submit`事件，阻止默认行为，添加自定义逻辑： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认的...
jquery各种实例
12-25
- **事件冒泡与阻止**：`event.stopPropagation()`可以阻止事件继续向上冒泡，而`event.preventDefault()`则能阻止默认行为，如提交表单。 ### 6. jQuery 动画效果 - **淡入淡出**：`fadeIn()`, `fadeOut()`可以...
Vue iview Selece下拉框内部套用Radio 点选按钮（change阻止默认事件问题）
c_x_m的博客
03-09 881
主要问题点：Select 和 Radio组件的均为change事件，如何阻止冒泡
RadioGroup使用你可能没有遇到的问题
weixin_43976155的博客
02-24 764
radioGroup有趣的实现
css去除复选框默认样式
最新发布
xiaohua0708day的博客
05-17 208
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
设置Radio不可点击遇到的问题
一个黑曼巴的博客
12-15 3295
// $("#yesRadio").disable(true);//单选框不可以修改 // $("#yesRadio").prop("readonly",true); // $("#noRadio").prop("readonly",true); $("#yesRadio").attr("disabled", true); $("#noRadio").attr("disabled", true); 尝试了各种方式后，发现只有以上方法可以起作用， checkbox, ra..
vant Checkbox Radio 禁止点击
wyk304443164的专栏
07-16 2190
直接放结论 使用 once 即可 <div v-if="questionList" class="appointment-content"> <div class="question-box" v-for="(question, index) in questionList" :key="index" v-once> 主要就 v-if="questionList" 和 v-once 起作用，因为 点击后会触发渲染，而once不会渲染，由于这只需要观看不需要改变，所以这种
Vue快速入门（二）.doc
07-09
此外，Vue 还提供了一些事件修饰符，如 `.prevent`（阻止默认行为）、`.stop`（阻止事件冒泡）、`.capture`（捕获阶段触发事件处理函数）、`.self`（只在当前元素上触发事件处理函数）和 `.once`（事件只触发一次）...
Day02 VUE资料整理
11-29
- **prevent:** 阻止默认行为。 - **capture:** 使用事件捕获模式。 - **once:** 只触发一次。 - **self:** 只有元素自身触发才响应。 **鼠标修饰符：** - **left:** 左键点击。 - **right:** 右键点击。 - **...
form:获取、赋值form表单
05-18
// 阻止表单默认的提交行为 myForm.addEventListener('submit', function(event) { event.preventDefault(); // 在这里进行表单验证或提交逻辑 }); // 监听某个输入框的值改变 myForm.elements['email']....
radio单选框的选中与取消（超详细讲解！）
热门推荐
Alone_in_的博客
06-26 3万+
一、前情提要 刚开始想做的效果是这样：我操作了checkbox复选框，radio单选框的状态会随之变化。进而引出一系列问题，如：1、radio单选框选中了如何取消，取消了如何再选中；2、当checkbox选中状态发生变化时触发事件；3、操作checkbox复选框，radio单选框如何做出相对应的改变 二、案例解说 直接给你们抛详细案例。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageE...
vue中radio单选框单击取消选中状态
BIlly Feng的博客
05-14 1万+
最近在项目实现一个问卷调研的功能，发现正常情况下，多选框是可以单击取消选中状态的，单选框就不行，单选框选中了就不能再取消，刚开始自己不知道怎么解决，然后自己百度了下，果然还是有大神解决了。 1、问题就是将input radio单选框改造成单击可以取消其选中状态 2、单纯的对input radio进行js控制行不通，因为radio是通过v-repeat出来的，有很多个，如果每一个都去获取元素的话，执行效率太低，failed 3、给radio添加click事件，判断checked属性，如果为true则取消ch
设置单选框radio不可选（禁用）
Claer_XX的博客
01-13 2万+
readonly属性对radio、select、checkbox这三个表单无效，设置disabled属性后，读取不到值 在网络上找到思路，总结出如下三种解决方案 把表单值存入<input type="hidden" >中，如果代码中要改变选中则同时要赋值给该输入框 提交表单前先移除disabled属性，不提交表单时或提交表单后设置disabled属性（代码中要改变选中前先移除disabled属性） 只设置没有选中的input框disabled属性 （代码中要改变选中时先移除disabled
el-radio ：单个el-radio，Click 切换选中与取消状态
The limits of your knowledge are the limits of your world
10-14 4368
1.单个el-radio 1 .单个el-radio； 2 .Click 切换选中与取消状态； html : @click.prevent 阻止radio标签默认点击事件； // 关键点： 阻止默认事件 <el-radio v-model="form.radio" label="1" @click.prevent="radioChange(form.radio)" >Option 1</el-radio >
checkbox阻止选中事件
zjb1314th的博客
08-27 3394
前端开发过程中，有时会遇到互斥的checkbox选项，此时需要根据已选中的选项，阻止互斥checkbox的选中事件。代码如下： $("input[name='check_box']").on('click', function() { //此处判断互斥逻辑 if() { return false; } }); ...
jquery radio 没选中，点击后，选中；选中后，点击，不再选中；
wangjun5159的专栏
08-11 8772
前言使用jquery实现radio,没选中，点击后，选中；选中后，点击，不再选中；实现思路最初的设想最初设想，监听radio的click事件，在click中，阻止默认行为，然后根据点击之前是否选中，来决定是否选中。但这样有个问题，在click监听函数中获取的checked值是点击后的值，无法获取之前的值。于是转变了实现思路修正后的思路监听radio的mousedown事件，获取checked值，因为
点击时为checkbox赋值和根据一个值判断其应该选中或者未选中
weixin_43942765的博客
10-22 1867
如何为checkbox赋值呢？小编从昨天下班时接到了这么一个任务，通过这个任务小编总结了一下checkbox的用法： 视图部分： <input type="checkbox" class="easyui-checkbox" id="check" name="check" onclick="checkbox(this)"/> 1.如何在点击的时候将指定的值赋值给checkbox？ 如下...
element阻止checkbox的点击选中事件
weixin_43371136的博客
01-12 2899
就是等复选框渲染完后重新赋值
微信小程序的多选改变样式_微信小程序更改radio/checkbox 单选/多选默认样式
06-09
要更改微信小程序中的radio/checkbox单选/多选默认样式，需要在wxss文件中进行样式覆盖。以下是一个示例： ```css /* 更改checkbox未选中时的样式 */ .checkbox-container .weui-icon-unchecked { width: 20px; height: 20px; border: 1px solid #999; border-radius: 2px; } /* 更改checkbox选中时的样式 */ .checkbox-container .weui-icon-checked::before { content: "\EA10"; font-family: weui-icon; color: #1AAD19; font-size: 20px; } /* 更改radio未选中时的样式 */ .radio-container .weui-icon-unchecked { width: 20px; height: 20px; border: 1px solid #999; border-radius: 50%; } /* 更改radio选中时的样式 */ .radio-container .weui-icon-checked::before { content: "\EA10"; font-family: weui-icon; color: #1AAD19; font-size: 20px; } ``` 在上面的示例中，我们使用了weui-icon字体库中的图标来替换默认的checkbox/radio选中状态的样式。同时，我们还更改了未选中状态的样式，使其更符合我们自己的需求。 这只是一个示例，你可以根据自己的需求进行更改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值