关于checkbox选中后显示值的问题（通用js）

最新推荐文章于 2024-07-07 11:08:48 发布
最新推荐文章于 2024-07-07 11:08:48 发布
阅读量5.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： input button javascript border function server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Awinye/article/details/1307000

 <script language=javascript>
 function check()
 {
    //alert(Form1.chkbiz_model.value);
    for(var i=0;i<document.Form1.elements.length;i++)
  {
       //if (document.Form1.elements[i].type=="checkbox"){
   if (document.Form1.elements[i].name=="chkbiz_model")
   {
   if(document.Form1.elements[i].checked == true)  alert(document.Form1.elements[i].value);
   //document.Form1.elements[i].checked=t;
   }

         }
 }
 </script>
 </HEAD>
 <body>
  <form id="Form1" method="post" runat="server">
               <table cellSpacing="0" cellPadding="0" width="90%" border="0">
                <tbody>
                 <tr>
                  <td width="24%" height="25"><input type="checkbox" value="生产型" name="chkbiz_model">
                   生产型
                  </td>
                  <td width="24%" height="25"><input type="checkbox" value="贸易型" name="chkbiz_model">
                   贸易型
                  </td>
                  <td width="24%" height="25"><input type="checkbox" value="服务型" name="chkbiz_model"> 服务型
                  </td>
                  <td width="28%" height="25"><input type="checkbox" value="政府或其他机构" name="chkbiz_model">
                   政府或其他机构
                  </td>
                 </tr>
                </tbody>
               </table>
   <P><INPUT type="button" value="Button" οnclick="check()"></P>
  </form> 

CheckBox多选取值及判断CheckBox选中是否为空的实例
08-28
最后，可以使用`alert(chk_value)`显示选中的`CheckBox`值，供用户参考或进一步处理。 总的来说，处理`CheckBox`多选取值和判断其是否为空的关键在于遍历所有`CheckBox`，检查它们的选中状态，并根据状态收集或验证...
关于checkbox选择个数限制
03-17
当用户尝试勾选新的Checkbox时，我们可以遍历所有相关的Checkbox，计算已选中的个数。如果超过预设的限制，就阻止这次改变，通常通过设置`event.preventDefault()`。以下是一个简单的示例： ```html ...
jquery 显示checkbox选中的值
liuguocheng的专栏
09-13 519
<br /> $('input[name="completed"]:checked').each(function(){ completed+=$(this).val()+','; })
element el-checkbox 选中后无法改变状态
u014788505的博客
11-25 2613
//dom: <el-checkbox-group v-model="checkList" > <!-- $event读取自带事件 --> <el-checkbox v-for="item in roleList" :label="item.roleName" :key="item.id" @change="roleChange($event,item)" ></el-checkbox> </e.
checkbox ,select,radio,得到选中值，设置显示的值
zhang_kang_user的博客
09-20 1541
表单中checkbox ，select ，radio，判断选中情况，得到选中值，设置默认选中的值
checkbox的显示问题
qq_39529315的博客
08-10 1649
前后台数据交互碰到复选框的问题，因为后台传的只是value，如果是直接创建复选框你给它赋值value=true是没有显示效果的，需要额外给他添加属性。 比我我从后台获取数据，添加到table中 "&lt;td&gt;&lt;input type='checkbox' value='"+da.P1[i].aa+"' name='check"+i+"'/&gt;&lt;/td&gt;"+ &quo
checkbox选中时值显示文本框_Excel | 单元格内容太多，加滚动条显示
weixin_30946627的博客
12-26 354
清晨，与您相约问题情境后台朋友留言：经常在EXCEL单元格里输入简介性质的文字，而又想保持表格的美观，不想把单元格拉的太大。单元格里能不能加个滚动条来拖动显示？这位朋友说的效果是这样的：所有文字，都放在A2单元格，拖动右侧滚动条显示。实现方法第一步：插入文本控件【开发工具】——【插入】——【文本框控件】。如下图：第二步：设置文本框属性在文本框控件上点击右键，打开属性框：更改“MultiL...
jQuery验证Checkbox是否选中的代码 推荐
10-28
在实际应用中，可能会涉及到更复杂的验证逻辑，例如验证一个表单内的多个复选框是否至少有一个被选中，或者需要根据用户的选择显示或隐藏某些字段等。在这种情况下，可能需要编写更复杂的逻辑来处理。 总之，使用...
比较全的JS checkbox全选、取消全选、删除功能代码
10-30
根据提供的文件信息，我们将讨论关于JavaScript（JS）中操作复选框（checkbox）的全选、取消全选和删除功能的实现。以下是详细的解释： ### 知识点一：全选与取消全选操作 在HTML中，复选框通常用于允许用户从一组...
前端checkbox实现全选，获取选中自定义属性的值
低调小熊猫 www.ilovey.live
09-13 3580
**记个笔记，方便自己以后copy** ## body代码 ```html //操作按钮 &lt;a onclick="check1()"&gt; &lt;/a&gt; //表头 &lt;input type="checkbox" id="awesome" name="ck" onclick="selectAll()"/&gt; //循环显示数据 uuid是自定
checkbox 保存值 绑定值
zhuxueliao的专栏
07-26 2701
1   2   3    //当是第一部分时 上传这个字段             var obj = document.getElementsByName('shiyongxingzhi'); //选择所有name="'test'"的对象，返回数组              //取到对象数组后，我们来循环检测它是不是被选中              var
iview中checkbox多选框带实际值和显示值的写法
帅的博客
07-07 304
iview中checkbox多选框带实际值和显示值的写法
checkbox 选中状态与显示状态的研究
weixin_30872733的博客
06-16 174
今天下午做一个小学网站，里面有个自定义选择记住密码 思路是，隐藏默认的checkbox，自定义了一个元素，通过click改变class来模拟，但是调试的时候发现，当默认checkbox位选中状态的时候，ckecked属性有可能为false，我把事件注释掉，发现没有事件的情况下，点击自定义的单选框，默认的单选框也可以被选中。也就是说，在label标签内不需要添加click事件来帮助...
解决el-checkbox选中状态更改问题
chen_cm的博客
11-25 2万+
解决el-checkbox选中状态更改问题！ 填坑、填坑、填坑！
jquery获取checkbox选中的值
热门推荐
xiaopzi的博客
12-16 2万+
jquery获取checkbox选中的值，包括全选 取消全选 反选 选中奇数行 获取选中的值 这里有一个注意点：使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来，所以改成使用prop 下面直接上代码 demo下载 <input type="checkbox" name="xpz" value="1"/>苹果 <input type="checkbox" name="xpz" value="2"/>橘子 <inpu
js弹出复选框 选择后将值显示在页面
qq_37950416的博客
04-14 2511
html <body> <div class="wrapper"> </div> <div class="layouts" style="display:none"> <div class="layoutsMain"> <div class="title">&...
[复选框] 获取checkbox选中的值
王春兰的博客
11-07 8105
版权声明 本博文首发于： 优快云 瑾兰 （https://blog.youkuaiyun.com/qq_28296925） 博客。 请注意： 无需授权即可转载； 甚至无需保留以上版权声明… … 文章目录一、情景二、代码1、html代码2、javascript3、总结三、网上摘选代码【参考】1、js获取复选框值2、jquery获取复选框值四、 鸣谢 一、情景 我想获取复选框下处于选中状态下的 值，该复...
我现在想点击获取el-checkbox当前是否被选中状态
最新发布
03-08
<think>好的，我现在需要帮助用户解决如何点击获取el-checkbox的选中状态。用户之前已经问过类似的问题，我之前给出了使用v-model和change事件的例子。现在用户的问题更具体，是点击时获取状态，可能需要考虑点击事件和checked状态的直接访问。 首先，我应该回顾之前的回答，确保这次的回答不会重复，但又要针对用户的具体需求。用户提到“点击获取”，可能是指通过点击事件来触发获取状态，而不仅仅是使用change事件。这时候，我需要考虑两种方式：使用@change事件或者@click事件，并比较它们的区别。 接下来，用户可能是在单个复选框或者复选框组中使用，需要分别说明两种情况。在单个复选框中，v-model绑定的是布尔值，所以可以直接访问这个值。而在复选框组中，v-model绑定的是数组，里面包含选中的label值。因此，可能需要根据用户的具体使用场景来给出不同的方法。 同时，用户可能希望的是在点击的时候立即获取状态，而change事件可能是在值改变后触发，而click事件则是在点击时触发，这时候可能状态还没有更新。这时候需要提醒用户注意事件触发的时机，可能建议使用nextTick来确保数据已经更新。 另外，用户可能没有明确说明是使用单个还是多个复选框，所以在回答中需要涵盖这两种情况，并给出相应的示例代码。还要考虑是否需要访问DOM属性，比如直接通过ref获取元素的checked属性，但这种方法可能不如响应式数据可靠，所以需要谨慎推荐。 最后，需要确保回答的结构清晰，步骤明确，让用户能够轻松理解并实现。同时，提醒用户注意事项，比如事件触发的时机，避免常见的错误。</think>在 Element UI 中实时获取单个 `el-checkbox` 的选中状态，可以通过以下两种方式实现： ### 方案一：通过点击事件直接获取 ```html <template> <el-checkbox v-model="isChecked" @click="handleClick($event)" ref="myCheckbox" >{{ isChecked ? '已选中' : '未选中' }}</el-checkbox> </template> <script> export default { data() { return { isChecked: false } }, methods: { // 方式1：通过事件对象直接获取 handleClick(event) { // 注意：此时数据尚未更新，需用 nextTick this.$nextTick(() => { console.log('DOM checked 属性:', event.target.checked) // 原生属性 console.log('数据层状态:', this.isChecked) // 响应式数据 console.log('ref 获取:', this.$refs.myCheckbox.checked) // 组件实例属性 }) } } } </script> ``` ### 方案二：通过监听数据变化（推荐） ```html <template> <el-checkbox v-model="isChecked">选项</el-checkbox> </template> <script> export default { data() { return { isChecked: false } }, watch: { // 监听数据变化（更可靠） isChecked(newVal) { console.log('当前选中状态:', newVal) // 这里可以执行选中后的业务逻辑 } } } </script> ``` ### 关键区别说明： | 方式 | 触发时机 | 数据状态 | 推荐场景 | |---------------|--------------------------|-------------------|------------------------| | `@click` | 点击瞬间触发 | 获取的是点击前状态 | 需要立即响应的点击操作 | | `@change` | 值变化后触发 | 最新状态 | 通用值变化监听 | | `watch` | 数据变化时自动触发 | 最新状态 | 需要持续跟踪状态变化 | ### 当需要强制获取最新状态时，可以使用： ```javascript // 在 methods 中 getRealTimeStatus() { console.log('当前实时状态:', this.isChecked) console.log('DOM 属性:', this.$refs.myCheckbox.$el.querySelector('input').checked) } ``` ### 注意事项： 1. 若同时使用 `v-model` 和 `checked` 属性，`v-model` 会覆盖 `checked` 2. 异步操作中获取状态建议配合 `this.$nextTick()` 3. 在复选框组中获取选中值，应使用数组绑定： ```html <el-checkbox-group v-model="checkedList"> <el-checkbox label="apple">苹果</el-checkbox> <el-checkbox label="banana">香蕉</el-checkbox> </el-checkbox-group> <!-- checkedList 会包含选中的 label 值数组 --> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值