Chonse.js select 多个选择框互斥options 多选单选都适用

最新推荐文章于 2023-10-23 15:56:02 发布
最新推荐文章于 2023-10-23 15:56:02 发布
阅读量483 收藏
点赞数
分类专栏： jquery 前端 文章标签： jquery html html5 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40613121/article/details/109650962
版权
使用Chosen.js库，可以轻松实现HTML select元素中多个选择框互斥的功能，适用于多选和单选场景。结合jQuery，可以创建更加友好的用户交互体验。
摘要由CSDN通过智能技术生成

html:

<div class="label-form">
   <select data-placeholder="-" class="chosen-select chosen-noSearch width-400" multiple name="bundle_id_blacklists" id="ip_blacklists">
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
     <option value="2">cccc</option>
     <option value="3">dddd</option>
     <option value="4">eeee</option>
     <option value="5">ffff</option>
   </select>
</div> 
<div class="label-form">
   <select data-placeholder="-" class="chosen-select chosen-noSearch width-400" multiple name="bundle_id_blacklists" id="ip_whitelists">
      <option value="0">aaaa</option>
      <option value="1"&g
最低0.47元/天 解锁文章
流水の时尚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现多选、反选 、全不选
郭晓湉
02-28 1284
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function selectAll() {  //全选 for (var i=1;i {document.getElementById("chec"+i).checked=true
设置多选互斥功能
最新发布
weixin_38337609的博客
05-30 155
i < 多选组件数组.length;j < 多选组件数组.length;function 设置多选互斥功能(多选组件数组) {多选组件数组[j].checked = false。let object = 多选组件数组[i];
Choice.js:更好的 javascript 随机库
06-18
选择.js 一个用于 JavaScript 的随机库 这是一个实用程序库，具有多个用于 javascript 的 Random 函数。 它最初被开发用于“自然”代码，用于物理、生成的图纸等。 查看 参考 所有函数都在Choice下命名空间，所以randint(0, 5)实际上是Choice.randint(0, 5) 文档 兰丁 randint（最小，最大） 取两个整数，返回一个等于或大于min但小于max的整数 min >= n < max /** * Example outputs: * 0, 152, 839, 1499 * but not 1500 */ randint ( 0 , 1500 ) ; 选择 选择（数组） 获取一个数组并从数组中返回一个随机元素 /** * Example outputs: * 1 * 3 * 4 */ choice
多个select 的互斥选择实现
fang
10-13 1735
/* * 目前不支持狐火 浏览器 * * * * * */ /******** 声明全局变量 *****/ var selectObjects=[];//空的数组，用于构建数组对象 var selectArray=new Object();//用于存储临时select的对象数组 /*** * 初始化页面时 调用onLoad() ...
JS多选答题时，选项互斥时的情况
随身笔记
10-23 343
JS多选答题时，选项互斥时的情况
HTML中chosen.js的小应用（含高度调试）
千山万水怎么能隔阻我对你的爱
06-22 2713
前言：最近world cup，一直在看比赛，每天3场比赛，我恨不得都看，可是还要上班，就只能看两场，从8点一直看到后半夜。所以本来想好好整理一下，写一点儿数据结构和算法的浅显分析与总结也一直没有写。前两天废了很多的精力在做一个下拉框，下了一个chosen.js的控件，还挺好用的，记录一下子用法。这个 chosen.js 是放在 GitHub 上的，有大手子可以上去给它好好改一改，因为有的功能还需完...
基于easyui 1.4.5的单选和多选框组件
07-14
这里的`name`属性用于定义单选框组，确保同一组内的单选框只能选择一个。`data-options`属性可以设置其他属性，如`checked`表示默认选中状态。 三、多选框（Checkbox） 多选框在HTML中用于提供一组可同时选择的...
radio、checkbox、select等选择标签的总结
03-24
- `select` 标签用于创建一个下拉列表，用户可以选择一个或多个选项，取决于是否设置了 `multiple` 属性。 - `name` 属性标识该下拉列表，以便在表单提交时识别。 - `options` 是包含在 `select` 元素内部的一...
js全选单选集合
03-20
在JavaScript（JS）中，全选和单选是常见的用户交互功能，常见于表格、列表等数据展示场景。用户可能需要一键选择所有选项，或者独立选择单个元素。本篇文章将深入探讨如何实现这些功能，并结合提供的`test.html`...
js 实现 两个checkbox互斥问题
03-31
js 实现 两个checkbox互斥问题! 值得下载看看!资源免费,大家分享!!
JS实现checkbox互斥(单选)功能示例
10-17
主要介绍了JS实现checkbox互斥(单选)功能,涉及JavaScript针对页面元素属性的判断及动态操作相关实现技巧,需要的朋友可以参考下
jquery实现select互斥联动
12-20
jquery实现select互斥联动，代码简洁易懂，方便使用，三个下拉框联动，选择互斥
前端项目-choices.js.zip
09-02
前端项目-choices.js,一个普通的JS定制文本输入/选择框插件
struts1.x html标签 radio,checkbox,multibox,select的使用
09-25
4. `html:select`标签：这个标签用于创建下拉选择框，允许用户从预定义的一组选项中选择。`html:select`的`property`属性指定ActionForm中对应的属性，而`options`或`option`子标签用于定义下拉列表的选项。通过`...
黑马程序员python基础班教程笔记：HTML表单常用控件1.docx
06-14
单选按钮用于让用户在多个互斥的选项中选择一个。同样使用`<input>`标签，但类型设为"radio"。例如： ```html 男 女 ``` 在单选按钮中，`name`属性必须相同，确保它们属于同一组。`checked`属性表示默认...
js解决下拉列表框互斥选项的问题
diaoting2815的博客
12-22 342
如图不区分选项与其他选项是互斥的关系，当选择了不区分时，其他选项就要去除，当有其他选项存在时，就不能有不区分 解决办法：定义change事件，若列表发生改变，首先判断点击的是否是不区分，若是，则将其他选项剪切掉，若是点击的是其他选项，就判断已选择的选项中是否有不区分，若有，则将其切除 源码： 下拉列表框中定义事件：@change="handleSelectedChange"...
用Javascrip 实现搜索框二选一互斥
weixin_53003128的博客
04-30 208
用Javascrip 实现搜索框二选一互斥 背景：想实现下图的两个日期搜索的二选一 想要实现的功能就是当用户想以交易时间来检索记录时，完成时间时间框变成不可用状态，当用户想以完成时间来检索记录时，相反，交易日期变成不可用状态。 一开始的思路是，当用户点击交易日期输入时间，完后时间直接变成不可点击，也就是交易日期input标签加上readonly，相反完成时间也是，但是后期实现之后，发现这种的交互方式对用户来说并不是很友好，当用户点击交易日期输入对应的时间后，突然改变注意，想使用完成时间来进行检索，这
vue 生成包含单选框多i选框的列表，单选框和多选框不可同时被选择，多选时清空单选选择状态，单选时清空多选选择状态，绑定id
04-05
可以使用Vue.js提供的v-model指令来实现单选框和多选框的选择状态绑定。同时，监听选择状态的变化，根据需要清空其他选项的选择状态即可。 以下是一个示例代码： ``` <template> <div> <ul> <li v-for="item in items" :key="item.id"> <input type="radio" :id="'radio-' + item.id" :value="item.id" v-model="selectedItem" @change="handleRadioChange(item.id)"> <label :for="'radio-' + item.id">{{ item.name }}</label> <br> <input type="checkbox" :id="'checkbox-' + item.id" :value="item.id" v-model="selectedItems" @change="handleCheckboxChange(item.id)"> <label :for="'checkbox-' + item.id">{{ item.name }}</label> </li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, ], selectedItem: null, selectedItems: [], }; }, methods: { handleRadioChange(id) { // 单选框被选择时，清空多选框选择状态 this.selectedItems = []; // 绑定id console.log('Selected item:', id); }, handleCheckboxChange(id) { // 多选框被选择时，清空单选框选择状态 this.selectedItem = null; // 绑定id console.log('Selected items:', this.selectedItems); }, }, }; </script> ``` 在上面的代码中，我们先定义了一个items数组，其中每个元素都有一个id和name属性。然后使用v-for指令遍历items数组，生成一个包含单选框和多选框的列表。单选框和多选框的选择状态分别绑定到selectedItem和selectedItems属性上。 在单选框和多选框的change事件处理函数中，我们根据需要清空其他选项的选择状态，并输出绑定的id值。 注意，为了保证单选框和多选框的选择状态互斥，我们需要在单选框被选择时清空多选框选择状态，在多选框被选择时清空单选框选择状态。这样可以保证每次只有一个选项被选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值