根据值为checkbox设置checked——function setCheckboxChecked(name, val)

最新推荐文章于 2024-08-08 20:54:02 发布
最新推荐文章于 2024-08-08 20:54:02 发布 · 209 阅读 · 0
文章标签：

#xhtml #javascript

本文介绍如何使用jQuery脚本动态改变HTML页面中复选框的状态，通过输入框的值来决定哪些复选框应该被选中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function setCheckboxChecked(name, val) { val=val.replace(/ +/g, ''); if (val.length > 0) { var tempArr = val.split(','); $(":checkbox[name='" + name + "']").each(function () { $(this).attr("checked", $.inArray($.trim($(this).val()), tempArr) != -1); }); } } function test() { var vals = $("#txt").val(); setCheckboxChecked("HepCHL_HL1", vals); } </script> </head> <body> <input type="checkbox" value="1" name="HepCHL_HL1" />1 <input type="checkbox" value="2" name="HepCHL_HL1" />2 <input type="checkbox" value="3" name="HepCHL_HL1" />3 <input type="checkbox" value="4" name="HepCHL_HL1" />4<br /> <input type="text" value="1,2,3" id="txt" /> <input type="button" value="Test" onclick="test()" /> </body> </html>

iteye_20954
关注
小程序：checkbox根据不同条件改变checked的值
susan的博客
04-29 1558
axml: <!-- 早、中、晚选择 --> <view class="chooseframe"> <checkbox-group > <label class="character4" a:for="{{items}}"> <checkbox class="checkbox" value="{{item.name}}" disabl...
设置，检查checkbox的checked属性。
前端切图仔的日常
05-12 1422
jquery判断checkbox是否选中，更改选中状态。
jQuery获取和设置checkbox的checked属性小结
要输就输给追求吧！
01-19 2万+
今天写静态页面，需要拿jquery去控制checkbox的check属性，开始用的attr，每次设置完成后，点开f12观察elements，后面每次，无论怎么点击checkbox，它的checked属性都是选中的，于是上网查找，得以解决，下面是是转载的内容 在jquery里，有两种操作元素属性的方法，一种是attr()，另一种是prop()。 attr()的属性在页面首次加载时就确定。当页面初
jquery 设置checkbox的checked属性相关
bsr1983的专栏
03-28 412
所使用的jquery版本为jquery-1.9.1，浏览器为Chrome 1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase 全选 function checkAll() { var checkedOfAll=$("#selectAll").prop("checked"); alert(checkedOfAl...
JS通过识别id、value值对checkbox设置选中状态
11-21
以下是一个jQuery示例，它根据变量`roleName`的值来设置对应的复选框： ```javascript $(function() { var roleName = $("#roleName").val(); // 获取需要初始化的数值 var arrStr = roleName.split(","); // ...
CheckBox多选取值及判断CheckBox选中是否为空的实例
08-28
总的来说，处理`CheckBox`多选取值和判断其是否为空的关键在于遍历所有`CheckBox`，检查它们的选中状态，并根据状态收集或验证用户的选取。无论是Android还是Web开发，这一逻辑都是通用的，只是实现方式略有不同。...
解决layui checkbox 提交多个值的问题
10-16
每个checkbox的name属性设置为同一个，如"quotation_type"，并且赋予不同的value值。 ```html 品种 {foreach $quotation_type as $key=>$val} <input name="quotation_type" lay-skin="primary" value="{$...
layui checkbox默认选中,获取选中值,清空所有选中项的例子
10-16
在本文中，我们将深入探讨如何使用layui框架处理checkbox控件，包括如何设置默认选中、获取选中值以及清空所有选中项。layui是一款基于前端JavaScript库的模块化前端框架，提供了丰富的UI组件，包括表格、表单、按钮...
获取table中CheckBox选中行的id
ygyan521的专栏
01-26 1443
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input t.
table checkbox获取id
老张的博客
11-26 570
多个复选框选中取值 ///回显示
javascript判断多个checkbox是否选择
永远热泪盈眶 坚持输出
09-01 1455
1、function checked(){ var isChecked = false; $("input[@type=checkbox]").each( function(){ if($(this).attr("checked")){ isChecked=true; return; } }) if(!isChecked){ alert("请至少选择一条记录进行操作！"); } return isChecked; } 2、funcion checked2{ var isCheck
Checkbox调用setChecked方法自动调用onCheckedChanged方法的问题
qq_28334237的博客
08-12 3111
安卓中，在使用checkbox控件时，用setChecked方法设置控件是否选中的状态，但是我发现，每次调用这个方法的时候，都会去执行onCheckedChanged方法，有时候，我们不需要再设置选中状态的时候监听是否选中。为了避免setChecked每次都自动调用onCheckedChanged方法，有以下两种解决办法： 1、区分人为点击和执行setChecked函数，在监听器中加入一个判断，...
解决vxe-table通过setCheckboxRow方法一次性改变多个节点选中状态导致页面卡死的问题
Y_seaboy的博客
08-08 1213
解决vxe-table调用setCheckboxRow方法导致页面卡死问题
CheckBox:屏蔽setChecked方法对OnCheckedChangeListener的影响
books1958的专栏
11-19 1万+
对于CheckBox的OnCheckedChangeListener，有两种可能会被触发： （1）用户点击了一下CheckBox； （2）代码中调用了setChecked(boolean checked)方法，并且参数checked与CheckBox原始的选中状态不一致。 有时候，需要只监听（1）的事件，而忽略（2）的事件。
pyqt5 QCheckBox使用setChecked(False)后再次用鼠标选中时无法触发信号函数的解决办法
夜雨凭栏的博客
12-06 5026
项目需要一个复选框QCheckBox来做某种选择，但是会有选中了但是不符合条件的情况，这种情况下需要把复选框的状态置为不选中，我的做法是在下面这个信号链接的函数中判断 if self.checkBox.isChecked()为真且不符合条件的情况下使用setChecked(False)立即置空复选框 self.checkBox.stateChanged.connect(self.set_qch...
JS----checked----checked选中和未选中的获取
热门推荐
直到世界的尽头
04-10 5万+
全选、全不选、反选功能html代码        篮球        足球        排球        网球        壁球        乒乓球        羽毛球                          JS代码function setVal(iNum){        var aForm = document.getElementById("myForm");
jquery 选中checkbox
weixin_30640769的博客
01-24 107
1 <script type="text/javascript"> 2 $(function(){ 3 //全选 4 $("#CheckedAll").click(function(){ 5 $('[name=items]:checkbox').attr('checked', true); 6 }); 7...
element-ui的table组件-checkbox选中分页记忆(二) -原记忆基础上再细分的嵌套一层记忆
徐子厚的博客
09-23 1272
一、前言 我司仓储系统需求，账号用户-拥有若干仓库权限(第一层记忆大勾选)-仓库又包含若干个是否可使用的发车点(第二层记忆小勾选)这些要全部记忆+修改记忆。 ps:一年前做的，上一篇分页一直说要放第二篇的，最近做总结就放上来了。 二、实现 1.需要后端配合提供前端需要 - 用户所拥有的仓库及发车点的 权限数据结构 和 公司所有的仓库及权限点 1.1公司的仓库权限...
input的type属性checkbox 默认checked，取消勾选如何动态获取checked值
最新发布
08-22
<think>我们正在处理一个Web开发中的常见问题：如何动态获取复选框（checkbox）的选中状态，特别是在默认选中情况下取消勾选后的值。 关键点：复选框在HTML中通常表现为<input type="checkbox">，其选中状态由checked属性（或属性值）控制。但是，在表单提交时，只有被选中的复选框才会提交值（即其value属性值），未选中的复选框则不会被包含在提交的数据中。 然而，问题在于：如果复选框默认是选中的（即HTML中设置了checked属性），然后用户取消勾选，那么我们需要能够获取到它未选中的状态。 解决方案通常有两种思路： 1. 在表单提交前，通过JavaScript监听复选框的变化，并记录状态，或者在提交时检查每个复选框的状态。 2. 在服务器端处理时，如果某个复选框未被提交，则视为未选中。但要注意，如果原本默认选中的复选框被取消，那么它就不会被提交，因此服务器端需要知道哪些复选框是默认选中的，才能判断出哪些复选框被取消了。这通常需要额外的隐藏字段来辅助。 具体实现方法： 方法一：使用JavaScript动态获取 我们可以通过给复选框绑定事件（如change事件）来实时跟踪其状态，或者在任何需要的时候（如表单提交时）使用DOM API获取其checked属性。 示例代码（JavaScript）： ```javascript // 通过ID获取复选框元素 var checkbox = document.getElementById('myCheckbox'); // 获取当前选中状态 var isChecked = checkbox.checked; ``` 方法二：在表单提交时处理未选中的复选框 为了确保未选中的复选框也能被服务器端识别，我们可以采用以下技巧： - 在每一个复选框旁边添加一个隐藏的输入字段（例如type="hidden"），其name属性与复选框相同，但值表示未选中（比如0），并且当复选框被选中时，我们通过JavaScript禁用这个隐藏字段（或者当复选框被选中时，我们移除这个隐藏字段，但这可能不够稳定）。或者，更常见的做法是：在提交表单前，为所有未选中的复选框创建一个隐藏字段并设置一个值（如0），这样服务器端就能收到每个复选框的状态（有值表示选中，0表示未选中）。 然而，更简洁的方法（无需JavaScript）是：在服务器端，我们默认认为所有未提交的复选框都是未选中的。但是，这要求服务器端知道哪些复选框是应该被考虑的。因此，我们可以在表单中为每个复选框设置一个隐藏字段，其name属性与复选框相同，但值设为0，并且将复选框的name属性改为另一个名字（或者使用数组形式），这样当复选框未选中时，隐藏字段的值（0）会被提交；当复选框被选中时，由于同名的多个字段，服务器端需要处理最后一个值（或者根据具体技术栈处理）。但这种方法并不通用。 另一种常见的做法是：给每个复选框设置一个固定的name，然后在服务器端，如果收到这个name且值为on（或设置的value），则表示选中；如果没有收到，则表示未选中。但是，对于默认选中的复选框，如果用户取消，服务器端就收不到任何值，因此我们需要在服务器端记录初始状态？这通常不可行，因为HTTP是无状态的。 因此，更推荐的做法是：使用JavaScript在提交表单前，为所有未选中的复选框添加一个隐藏字段，其值为0（或false），这样服务器端就能收到每一个复选框的状态。 但是，考虑到问题要求动态获取，尤其是在默认选中情况下取消勾选后的状态，我们更关注前端如何获取。 下面是一个使用JavaScript监听复选框状态变化的例子： HTML: ```html <input type="checkbox" id="terms" checked="checked"> 同意条款 ``` JavaScript: ```javascript // 获取复选框元素 const checkbox = document.getElementById('terms'); // 添加change事件监听 checkbox.addEventListener('change', function(event) { // 当状态变化时，输出当前状态 console.log('当前状态：', event.target.checked); }); // 或者在需要的时候（比如提交表单时）获取状态 function submitForm() { console.log('提交时状态：', checkbox.checked); // 然后可以在这里处理，比如如果未选中，则阻止提交，或者动态添加隐藏字段等 } ``` 对于表单提交，如果我们希望即使复选框未选中也能提交一个值（比如0），我们可以这样处理： 在表单提交时，遍历所有复选框，对于未选中的复选框，动态添加一个隐藏字段。 示例： ```javascript document.querySelector('form').addEventListener('submit', function(e) { // 防止表单默认提交行为（为了演示，这里先阻止，实际根据需要决定是否阻止） e.preventDefault(); // 获取所有复选框 const checkboxes = document.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { if (!checkbox.checked) { // 创建一个隐藏字段，name与复选框相同，值设为0 const hiddenField = document.createElement('input'); hiddenField.type = 'hidden'; hiddenField.name = checkbox.name; // 注意：复选框需要设置name属性 hiddenField.value = '0'; // 将隐藏字段添加到表单中 e.target.appendChild(hiddenField); } }); // 然后可以继续提交表单 e.target.submit(); }); ``` 注意：这种方法会为每个未选中的复选框添加一个隐藏字段，而选中的复选框会按照正常方式提交（即其value值）。这样，服务器端收到的数据中，对于每个复选框，要么是选中的值（比如1），要么是0（未选中）。但是，要注意同名问题：如果复选框本身在提交时会有值，那么添加的隐藏字段会与它同名，这样在服务器端可能会解析为数组（比如PHP）或最后一个值（取决于服务器端框架）。因此，为了避免冲突，我们也可以采用不同的命名约定，例如将隐藏字段的name设置为复选框name加上一个后缀（如`_hidden`），但这样服务器端处理逻辑就需要调整。 因此，更常用的做法是：在服务器端，我们只根据是否收到复选框的name（以及非0值）来判断选中状态，否则就是未选中。但是，对于默认选中的复选框，如果用户取消，服务器端就收不到这个name，所以我们需要在服务器端知道哪些复选框是应该被考虑的。这通常需要我们在表单中包含一个所有复选框的列表（比如以隐藏字段的形式列出所有复选框的name），这样服务器端就知道哪些复选框没有被提交。这种方法相对复杂。 综上所述，前端动态获取复选框状态使用JavaScript的checked属性是最直接的方法。对于表单提交，如果需要确保每个复选框的状态都被提交，可以采用在提交前动态添加隐藏字段的方式（但要处理好同名问题），或者使用JavaScript将状态收集到一个字段中（比如JSON）再提交。 根据问题，我们重点在于动态获取，因此推荐使用JavaScript的checked属性。 总结步骤： 1. 给复选框设置一个id（或者通过其他选择器获取）。 2. 使用document.getElementById等DOM方法获取元素。 3. 通过元素的checked属性获取状态（布尔值）。 对于默认选中后取消的情况，checked属性会变为false，因此可以正确获取。 示例： 假设有一个默认选中的复选框： ```html <input type="checkbox" id="subscribe" checked> 订阅邮件 ``` 用户取消勾选后，通过JavaScript获取： ```javascript var subscribe = document.getElementById('subscribe'); console.log(subscribe.checked); // 输出false ``` 因此，我们可以通过这种方式动态获取。 相关问题： 1. 如何使用jQuery获取复选框的选中状态？ 2. 在React或Vue等前端框架中，如何绑定和获取复选框的状态？ 3. 在表单提交时，服务器端（如PHP、Node.js、Django）如何处理未选中的复选框？ 4. 如何为多个复选框批量添加状态监听？ 5. 如何实现全选和取消全选功能？</think>在Web开发中，动态获取复选框（checkbox）的选中状态，特别是处理默认选中后取消勾选的情况，需要结合HTML、JavaScript和表单处理机制。以下是具体解决方案： ### 核心解决方案 1. **HTML结构**：使用`checked`属性设置默认选中状态 ```html <input type="checkbox" id="newsletter" name="subscribe" value="1" checked> <label for="newsletter">订阅邮件</label> ``` 2. **JavaScript获取状态**：通过DOM元素的`checked`属性 ```javascript const checkbox = document.getElementById('newsletter'); // 获取实时状态（布尔值） console.log("当前状态:", checkbox.checked); ``` 3. **表单提交处理**：未选中的复选框不会提交数据，需特殊处理 ```javascript document.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); const isChecked = checkbox.checked; // 未选中时手动添加隐藏字段 if (!isChecked) { const hiddenInput = document.createElement('input'); hiddenInput.type = 'hidden'; hiddenInput.name = checkbox.name; // 同名覆盖 hiddenInput.value = '0'; // 未选中值 e.target.appendChild(hiddenInput); } // 提交表单 e.target.submit(); }); ``` ### 关键点说明 - **默认选中处理**：HTML中设置`checked`属性后，JS的`.checked`初始值为`true` - **状态变化检测**： - 监听`change`事件获取用户操作： ```javascript checkbox.addEventListener('change', () => { console.log("用户操作后状态:", checkbox.checked); }); ``` - **表单提交逻辑**： - 浏览器默认行为：**只提交选中的复选框**（未选中的字段会被忽略） - 解决方案：提交前动态添加隐藏字段（如`value=0`）表示取消状态 ### 框架推荐方案 #### Vue.js ```html <template> <input type="checkbox" v-model="isSubscribed"> 订阅 </template> <script> export default { data() { return { isSubscribed: true } // 默认选中 }, watch: { isSubscribed(val) { console.log("状态变化:", val); // 自动响应变化 } } } </script> ``` #### React ```jsx function CheckboxExample() { const [isChecked, setIsChecked] = useState(true); // 默认选中 const handleSubmit = (e) => { e.preventDefault(); console.log("提交值:", isChecked ? '1' : '0'); }; return ( <form onSubmit={handleSubmit}> <input type="checkbox" checked={isChecked} onChange={(e) => setIsChecked(e.target.checked)} /> <button>提交</button> </form> ); } ``` ### 服务器端处理示例（PHP） ```php <?php // 检查字段是否存在（未选中时字段不会提交） $subscribe = $_POST['subscribe'] ?? '0'; // 结果： // - 用户未操作：值为"1"（默认选中） // - 用户取消勾选：值为"0"（隐藏字段） // - 用户重新勾选：值为"1" ?> ``` ### 常见问题解决 - **Q: 为什么取消勾选后服务器收不到值？** A: 这是浏览器默认行为，需按上述方案添加隐藏字段覆盖 - **Q: 如何获取默认值是否被修改过？** A: 比较初始状态与当前状态： ```javascript const initialValue = true; const isModified = (checkbox.checked !== initialValue); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值