checkbox 相关问题

我有这样一个JavaScript const checkBox = document.createElement("输入") checkBox.className = "form-check-input me-1 fa-pull-right" checkBox.type = "复选框" li.appendChild(checkBox); 检查博...

javascript checkbox addeventlistener createelement

回答 1 投票 0

复选框的单选按钮功能 - MUI

我正在尝试创建一个带有包裹在手风琴中的单选按钮功能的复选框。问题是，我只需要一次选择一项。如果标记了，那么当另一个...

javascript reactjs react-hooks checkbox material-ui

回答 1 投票 0

将图像添加到自定义tkinter复选框

尝试制作登录页面（使用customtkinter）。完成了大部分代码，但当涉及到显示密码时，我想向复选框添加图像。这是我尝试添加即时消息的复选框...

python python-3.x tkinter checkbox customtkinter

回答 1 投票 0

选中复选框时，更改div的背景颜色

我想做的是，当选中复选框时，更改 div 的背景颜色，当未选中时，删除背景颜色。我怎样才能使用 jquery 做到这一点？我想做的是，当选中复选框时，更改 div 的背景颜色，当未选中时，删除背景颜色。我怎样才能使用 jquery 做到这一点？ <div class="checkbox-container"> <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox"> <label for="personal-info-checkbox"> Mark as reviewed and acknowledged </label> </div> 使用父选择器和 .removeclass 我不知道如何选择我的 div 并使用 jquery 关闭和打开颜色。为此你不需要 jQuery 您只能使用 css 来做到这一点。 .checkbox-container:has(input:checked) { background-color: red; } :has chromium、safari 支持伪类。对于 Firefox，需要启用标志。在 mdn 了解更多信息：：有伪类向 change 添加一个 input 事件监听器，根据是否选中来设置其最接近的父级 div 的背景颜色： $('input[type="checkbox"]').change(function(){ $(this).closest('div').css('background-color', this.checked ? 'green' : 'white') }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="checkbox-container"> <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox"> <label for="personal-info-checkbox"> Mark as reviewed and acknowledged </label> </div> 以下是如何执行此操作的示例 $(function() { $("input[type=checkbox]").click( () => { $("div").toggleClass("background"); }) }); .background { background: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="height:4em;"> Change colors<input type="checkbox" /> </div> 有多种方法可以做到这一点： CSS（在撰写本文时，浏览器支持有限）， jQuery（以及其他库），以及原生 JavaScript。下面的例子代码中有解释性注释： // using jQuery, we select the relevant element via its class, and use the on() // method to bind the anonymous function as the event-handler for the 'change' // event: $('.checkbox-container.with-jQuery').on('change', function(){ // here we find the <input> element descendant with find(), and then use the // is() method to test that element to see if it matches the :checked pseudo- // class; this returns a Boolean true/false which is cached in the 'checked' // variable: let checked = $(this).find('input').is(':checked'); // here we use toggleClass() to toggle the 'checked' class-name on the element, // and use the 'checked' variable to ascertain whether the class should be // added/retained (if the Boolean is true) or removed/not-added (if the Boolean // is false): $(this).toggleClass('checked', checked); }); // using JavaScript we use document.querySelector to retrieve the element // with the listed classes; and use EventTarget.addEventListener() to bind the // anonymous Arrow function as the event-handler for the 'change' event: document.querySelector('.with-JavaScript.checkbox-container').addEventListener('change',(evt)=>{ // we cache a reference to the current element (the <div>): let current = evt.currentTarget, // we find the <input> descendant, and access its checked property to // obtain a Boolean true (if checked) or false (if not-checked) and // store that Boolean in the 'checked' variable: checked = current.querySelector('input').checked; // here we use Element.classList.add() to add the 'active' class-name, // with the checked variable to determine if it should be added/retained // (if true) or removed/not-added (if false): current.classList.add('active', checked); }); :root { --checkedColor: lime; } /* here we select the element via classes, and use :has() to check if it has a descendant element which matches the enclosed selector: */ .with-CSS.checkbox-container:has(input:checked) { /* if so, we set the --checkedColor custom property as the background-color of the element: */ background-color: var(--checkedColor); } .with-jQuery.checkbox-container.checked { background-color: var(--checkedColor); } .with-JavaScript.checkbox-container.active { background-color: var(--checkedColor); }  <div class="checkbox-container with-CSS">  <input type="checkbox" class="checkbox-border" id="personal-info-checkbox1"> <label for="personal-info-checkbox1"> Mark as reviewed and acknowledged </label> </div> <div class="checkbox-container with-jQuery"> <input type="checkbox" class="checkbox-border" id="personal-info-checkbox2"> <label for="personal-info-checkbox2"> Mark as reviewed and acknowledged </label> </div> <div class="checkbox-container with-JavaScript"> <input type="checkbox" class="checkbox-border" id="personal-info-checkbox3"> <label for="personal-info-checkbox3"> Mark as reviewed and acknowledged </label> </div> 参考资料：浏览器兼容性： :has()。 CSS： CSS 自定义属性。 :checked。 :has()。 var()。 JavaScript： document.querySelector()。 Element.classList API. jQuery@ is()。 on()。 toggleClass()。试试这个希望对你有帮助 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#personal-info-checkbox").click(function(){ if($(this).is(":checked")){ $(this).parent().addClass("color-blue"); }else { $(this).parent().removeClass("color-blue"); } }); }); </script> <style> .checkbox-container { padding:20px; } .color-blue { background-color:blue; } </style> </head> <body> <div class="checkbox-container"> <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox"> <label for="personal-info-checkbox"> Mark as reviewed and acknowledged </label> </div> </body> </html> 当一个输入被检查并改变颜色时，我需要另一个输入div的背景恢复原样...我不知道如何在JS中做到这一点..我有三个输入，在检查和更改时必须将颜色更改为红色他们是这样。但我需要当其中一个被检查时，另一个的背景回到我的第一个颜色......这可能吗？

javascript html jquery css checkbox

回答 6 投票 0

将默认选中的 Wix 复选框值保存到注册表

我有一个用 Wix 编写的安装程序。在 UI 向导中，有一个默认处于选中状态的复选框。我想将此复选框的值保存到注册表中以进行更改、修复和升级...

checkbox wix registry

回答 2 投票 0

元素具有 `checked` 属性但未被选中？

我正在使用 ThreeDubMedia 的拖放选择功能来选中和取消选中几个复选框。它会检查和取消检查一次，但仅此而已。更重要的是，当我看着 elem...

javascript jquery input checkbox toggle

回答 1 投票 0

在 React 中创建复杂对象

在此输入图像描述当我提交如何在钩子中使用 useState 获取所有复选框状态和注释时函数handleEditformsubmit（e：任何）{ e.preventDefault() var 埃里兹 = [] 变种

javascript reactjs checkbox

回答 2 投票 0

如何在 C# 中使用 Spreadsheet Gear 创建复选框？

我需要使用电子表格设备在 Excel 中添加一个复选框。 Spreadsheet Gear 的文档非常糟糕，并且不包含任何有关如何正确初始化它们的方法或信息。你怎么：

c# excel checkbox reporting spreadsheetgear

回答 1 投票 0

当在反应钩子表单中选中复选框为真时，如何要求日期输入字段？

假设我有一个复选框，它不是必填字段。如果用户选中它，将显示日期输入字段。日期字段是必需的，并且日期必须是过去的日期。如果用户取消选中该复选框...

reactjs validation checkbox conditional-formatting react-hook-form

回答 1 投票 0

ReactJs-创建复杂的 json 对象

在此输入图像描述当我提交如何在钩子中使用 useState 获取所有复选框状态和注释时函数handleEditformsubmit（e：任何）{ e.preventDefault(); var errids = []; var arr_leng...

javascript reactjs checkbox

回答 1 投票 0

Ionic 4：选中 Ion 复选框，未从 ionchange 更新

这就是我创建带有复选框的列表来选中/取消选中员工的方法。我将员工的选中属性绑定到复选框。这就是我创建带有复选框的列表来选中/取消选中员工的方法。我将员工的选中属性绑定到复选框。 <ion-list> <ion-item *ngFor="let employee of employees; let i = index"> <ion-label>{{employee.name}}</ion-label> <ion-checkbox value="{{employee.id}}" [(ngModel)]="employee.isChecked" (ionChange)="emplsChange($event.detail.checked, i)"></ion-checkbox> </ion-item> </ion-list> 但是，当复选框更改时，我想检查它是否可以被选中或必须为 false。为此，我在检查条件后将所选员工的 isChecked 属性设置为 false。 emplsChange(detail: boolean, index: number) { const newEmployees: IEmployee[] = this.employees; this.employees = []; // get all checked employees const checkedEmpls = newEmployees.filter(e => e.isChecked).length; newEmployees[index].isChecked = detail && checkedEmpls === this.needdedEmpls ? false : detail; this.employees = newEmployees; } 现在的问题是，如果条件为 true 并且我将 isChecked 设置为 false，则它可以正常工作并且不会选中该复选框。但仅限于第一次。如果我再次检查同一个员工，isChecked 将设置为 false，但在 UI 上它会被检查。我尝试使用 (ngModelChange) 而不是 (ionChange) 来解决这个问题，但它没有任何作用。所以主要问题是，当我在组件的 onchange 方法中设置 ion-checkbox-Model 时，UI 没有正确更新。你们中的一个人能看到另一个问题吗？有人经历过同样的事情吗？ Can Som3One 请帮忙！1!!!11 谢谢我正在使用离子：离子 CLI：5.2.1 离子框架：@ionic/angular 4.7.0-dev.201907122213.5db409f @角度-devkit/构建角度：0.801.1 @angular-devkit/schematics：8.1.1 @角度/cli：8.1.1 @ionic/角度工具包：2.0.0 更新：我通过使用深层复制来解决这个问题，而不是在 ionchange 方法中处理员工数组的引用。新的看起来像这样： emplsChange(detail: boolean, index: number) { const newEmployees: IEmployee[] = this.copy(this.employees); const checkedEmpls = newEmployees.filter(e => e.isChecked).length; const needdedEmpls = this.day.event.scheduledTask.scheduledTaskDays[this.indexOfDay].neededEmployees; if (detail !== newEmployees[index].isChecked) { newEmployees[index].isChecked = detail && checkedEmpls === needdedEmpls ? !detail : detail; this.employees = newEmployees; } } copy(o) { let output, v, key; output = Array.isArray(o) ? [] : {}; for (key in o) { v = o[key]; output[key] = (typeof v === 'object') ? this.copy(v) : v; } return output; } 尝试这样做：- <ion-checkbox value="{{employee.id}}" [(ngModel)]="employee.isChecked" (ionChange)="emplsChange($event.checked, i)">

angular ionic-framework checkbox ionic4 2-way-object-databinding

回答 1 投票 0

Android：复选框选择器无法正常工作

我正在开发一个应用程序，在其中使用复选框和应用选择器。我的复选框代码如下：我正在开发一个应用程序，在其中使用复选框和应用选择器。我的复选框代码如下： <CheckBox android:id="@+id/checkBox" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="0.5" android:button="@drawable/custom_checkbox" android:clickable="false" android:focusable="false" android:gravity="center" /> custom_checkbox.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/checkbox_checked" android:state_checked="true"/> <item android:drawable="@drawable/checkbox_checked" android:state_pressed="true"/> <item android:drawable="@drawable/checkbox_unchecked"/> </selector> checkbox_checked <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/green_tic"/> <item> <shape android:shape="rectangle" > <corners android:radius="@dimen/corner_radius_for_ask_option"/> <size android:height="20dp" android:width="20dp" /> </shape> </item> </layer-list> checkbox_unchecked <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle" > <stroke android:width="2px" android:color="@color/color_light_grey" /> <corners android:radius="@dimen/corner_radius_for_ask_option" /> <size android:height="20dp" android:width="20dp" /> </shape> </item> </layer-list> 上面的代码在 Note 3 和同类手机上运行良好。看起来像：但在三星 s2 上它看起来像：尝试在您的形状中添加透明实体： <shape android:shape="rectangle" > <corners android:radius="@dimen/corner_radius_for_ask_option"/> <size android:height="20dp" android:width="20dp" /> <solid android:color="@android:color/transparent"/> </shape> 其他可绘制 XML 也相同。要解决此问题，您应该使用 app:button="@drawable/custom_checkbox" 而不是 android:button="@drawable/custom_checkbox"

android android-layout checkbox android-checkbox android-selector

回答 2 投票 0

复选框默认选中=“选中”不起作用？

复选框默认选中不起作用！我尝试修复它，但我找不到错误在哪里？所以在页面加载时检查，在页面加载后未检查！？我试过了复选框默认选中不起作用！我尝试修复它，但我找不到错误在哪里？所以在页面加载时检查，在页面加载后未检查！？我试过了 <div class="onoffswitch" style="margin: 0 auto;"> <input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked="checked"/> <label class="onoffswitch-label" for="AvButtonAutoGames"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> 还有那个 <div class="onoffswitch" style="margin: 0 auto;"> <input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked/> <label class="onoffswitch-label" for="AvButtonAutoGames"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> 要指定值，请使用checked="true"，否则不指定属性。 Checked: <input type="checkbox" checked="true" /><br/> Not checked: <input type="checkbox" /> 很难看出，但您正在使用此语法来定义复选框值？ document.getElementById('AvButtonAutoGames').checked = true 如果是这样，这是不正确的 - 但在第一个 JS 示例中，您有正确的 prop 用法： $('#AvButtonAutoGames').prop('checked', true) 与 HTML5 中一样，要应用的语法只是 <input checked> 或为了清晰起见而扩展 <input checked="checked">。缺少 checked 属性会导致输入字段未经检查。只需将您的.checked=X转换为功能调用，它就应该可以工作我认为值得补充的是，设置 checked 属性将选中该框，并且不允许用户取消选中它。如果所需的功能是默认选中复选框，但用户仍可以取消选中，请使用 defaultChecked 属性： <input type="checkbox" id="AvButtonAutoGames" defaultChecked /> 或 document.getElementById("AvButtonAutoGames").defaultChecked = true;

javascript jquery html checkbox

回答 3 投票 0

Python :: Selenium :: 找不到元素

我有这个元素：启用VLAN：我有这个元素： <td> <b>Enable VLAN:</b> <label class="switch-group icon-switch-close"> <input type="checkbox" name="vlan" size="2" maxlength="2" value="ON"> </label> </td> 我只想点击这个元素。我确实尝试过： vlancheckbox = self.driver.find_element(By.CSS_SELECTOR,'.switch-group.icon-switch-close') vlancheckbox = self.driver.find_element(By.CLASS_NAME,'switch-group icon-switch-close') vlancheckbox = self.driver.find_element(By.NAME,'vlan') vlancheckbox = self.driver.find_element(By.XPATH,'/html/body/div[3]/form/table[1]/tbody/tr[2]/td/label') 错误总是一样的：selenium.common.exceptions.NoSuchElementException: 我只是找不到点击此类复选框/按钮的方法。我发现您的按钮使用了“复选框”输入类型。您可以通过使用“.click()”函数来实现这一点。它看起来像这样： vlancheckbox = self.driver.find_element(By.XPATH,'/html/body/div[3]/form/table[1]/tbody/tr[2]/td/label') vlancheckbox.click()

python selenium-webdriver checkbox

回答 1 投票 0

checkbox 相关问题

最新问题