checkbox 相关问题

如何使用 WordPress 元框中的单个复选框值？

我正在尝试使用元框复选框在悬停时隐藏/显示。问题是，如果任何帖子选中了该复选框，它就会显示 div。我需要它来切换 div“开”和“关”取决于...

动态插入 DOM 元素后触发 Bootstrap JS

我使用 bootstrap-toogle 来制作精美的复选框。 它适用于页面加载，但如果我通过 JS 动态插入输入元素，它会显示默认复选框。 我使用 bootstrap-toogle 来制作精美的复选框。 它适用于页面加载，但如果我通过 JS 动态插入输入元素，它会显示默认复选框。 <link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <div class="row"><label for="button_1">Button 1 </label><input type="checkbox" id="button_1" name="button_1" checked="checked" data-toggle="toggle"></div> <div id="add">ADD button</div> <script type="text/javascript"> $(document).on("click", "#add", function() { var number = $("div.row").length + 1; var content = "<div class=\"row\"><label for=\"button_"+number+"\">Button "+number+" </label><input type=\"checkbox\" id=\"button_"+number+"\" name=\"button_"+number+"\" checked=\"checked\" data-toggle=\"toggle\"></div>"; $("div.row").last().after(content); }); </script> 这是一个小提琴：https://jsfiddle.net/8w3dk264/ 有没有办法可以在动态插入元素后触发 bootstrap-toogle 代码？ 谢谢， 天哪，我应该阅读手册:( 就这么简单： $(elem).bootstrapToggle(); 对不起，

使用 ngFor Angular 创建复选框列表

我有一个结构如下的对象列表： [{项目}，{项目}，{项目}] 我正在尝试创建一个带有角度的复选框列表，如下所示： 我有一个结构如下的对象列表： [{item},{item},{item}] 我正在尝试创建一个带有角度的复选框列表，如下所示： <form> <input *ngFor="let object of objects" type="checkbox"> {{object.name}} </form> 复选框本身确实显示了，但我无法获取每个复选框显示的对象的名称。我做错了什么？ 您可以使用带有 *ngFor 的复选框，如下所示。 <form> <div *ngFor="let object of objects"> <input type="checkbox" [checked]="object.checked"> {{object.name}} </div> </form> object变量仅存在于ngForOf的上下文中，在您的情况下，这是<input>元素的上下文。 您可以将 <input> 包裹在 ng-container 元素内，并将 ngForOf 绑定到最后一个。像这样： <form> <ng-container *ngFor="let object of objects"> <input type="checkbox"> {{object.name}} <ng-container> </form> 使用这种方法，生成的 HTML 是相同的，因为 ng-container 元素被剥离。 您需要将 *ngFor 放在容器上才能使范围变量在其中可见。这里我使用了div，但是你可以使用任何你想要的东西。 <form> <div *ngFor="let object of objects"> <input type="checkbox"> {{object.name}} <div> </form> 我必须确保标签中的 for 属性与输入 id 相同： 请参阅此处的片段 <div class="m-checkbox-list"> <label *ngFor="let detectionSource of detectionSources" for="detectionSource_{{detectionSource.id}}" class="m-checkbox"> <input id="detectionSource_{{detectionSource.id}}" type="checkbox" name="detectionSource_{{detectionSource.name}}" [(ngModel)]="detectionSource.isSelected"> {{detectionSource.name}} <span></span> </label> </div>

更改角度材质复选框（mat-checkbox）的大小

我正在尝试增加材质复选框的大小。 变换似乎增加了材质复选框的大小。但是，我不确定这是否是实现这一目标的正确方法？ CSS ::ng...

在搜索[重复]时保持 CheckedListBox 项目的选中状态

我在用户控件中有一个 CheckedListBox。 搜索项目时，复选框会被取消选中。我尝试了很多次来解决它，但抛出异常。 最初的搜索工作正常。普...

在搜索时保持选中框的状态c#

我在用户控件中有一个选中列表框。搜索项目时，选中的框会被取消选中。我尝试了很多次来解决它，但抛出异常。 最初的搜索工作正常。普...

复选框周围的可点击空间太多

我正在构建一个待办事项列表网站，由于某种原因，创建的所有任务在复选框周围都有太多空间。添加的任务的屏幕截图。 我尝试将复选框样式设置为 0 填充，0

显示标签分页 javascript 计数复选框

我有一个显示标签表，它使用复选框装饰器来跟踪表中选定的值。我正在尝试使用 Jquery 跟踪表中所选值的数量以进行验证...

在AngularJS中选择checkall时触发所有复选框事件

姓名 <... <table class="table"> <thead> <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th> <th> Name </th> </thead> <tr ng-repeat="x in items"> <td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)" /></td> <td>{{x.name}}</td> </tr> </tr> </table> 如何在单击“selectall()”复选框时获取所有 item.id ？ 另外，你能为我建议 ng-repeat 复选框合适的 ng-model 语法吗？ 谢谢， 拉贾 K 看一下这个示例，您可以看到复选框值如何变化， 使用复选框时使用 ng-change 而不是 ng-click // the main (app) module var myApp = angular.module("myApp", []); // add a controller myApp.controller("myCtrl", function($scope) { $scope.value1 = "NO"; $scope.items = [{ id: 1, check: "NO", name: "A" }, { id: 2, check: "NO", name: "B" }, { id: 3, check: "NO", name: "C" }, { id: 4, check: "NO", name: "D" }, { id: 5, check: "NO", name: "E" }, { id: 6, check: "NO", name: "F" }, { id: 7, check: "NO", name: "G" }, { id: 8, check: "NO", name: "H" }]; $scope.selectAll = function() { angular.forEach($scope.items, function(elem) { elem.check = $scope.value1; }) } }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <table class="table"> <thead> <th> <input type='checkbox' name='selectall' ng-true-value="YES" ng-false-value="NO" ng-model="value1" ng-change="selectAll()">{{value1}} </th> <th>Name</th> </thead> <tbody> <tr ng-repeat="x in items"> <td> <input type='checkbox' ng-model="x.check" ng-true-value="YES" ng-false-value="NO" ng-change="select($event,x.id)" /> {{x.check}} </td> <td>{{x.name}}</td> </tr> </tbody> </table> </body> var myapp = angular.module('app', []); myapp.controller('Ctrl', function ($scope) { var vm = this; vm.data = { items: [ {id:1,name:"ali",selected: "NO"}, {id:2,name:"reza",selected: "NO"}, {id:3,name:"amir",selected: "NO"} ] }; vm.value1 = false; vm.selectAll = function($event){ var checkbox = $event.target; var selected = "NO"; if(checkbox.checked) { selected = "YES"; } else { selected = "NO"; } angular.forEach(vm.data.items, function(item) { item.selected = selected; }); } }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="Ctrl as vm"> <table class="table"> <thead> <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th> <th> All </th> </thead> <tr ng-repeat="x in vm.data.items"> <td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)" /></td> <td>{{x.name}}</td> </tr> </table> </div> 这里我给出了选择所有记录的场景。根据您的需要进行修改。 <button ng-click="selectAll()">select all</button> <div ng-repeat="item in items"> <label> {{item.n}}: <input type="checkbox" ng-model="selected[item.id]"> </label> </div> 在控制器中，只需将 selected 中的所有项目设置为 true 即可： $scope.selected = {}; $scope.selectAll = function(){ for (var i = 0; i < $scope.items.length; i++) { var item = $scope.items[i]; $scope.selected[item.id] = true; } };

使公式复选框可单击

我想让公式复选框 D9:D16 可单击以取消选中，即使 D8 使 D9:D16 选中。 我在 D9:D16 上尝试了 ={D8} 但复选框的状态是由底层表单决定的...

选中/取消选中复选框时更改变量值

我试图根据复选框的状态更改变量的值： if(document.getElementByType('checkbox').checked) { ...</desc> <question vote="5"> <p>我试图根据复选框的状态更改变量的值：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; if(document.getElementByType(&#39;checkbox&#39;).checked) { var a=&#34;checked&#34;; } else { var a=&#34;not checked&#34;; } document.getElementById(&#39;result&#39;).innerHTML =&#39;result &#39;+a; &lt;/script&gt; &lt;input type=&#34;checkbox&#34; value=&#34;1&#34;/&gt;Checkbox&lt;br/&gt; &lt;br/&gt; &lt;span id=&#34;result&#34;&gt;&lt;/span&gt; </code></pre> <p>这段代码有什么问题？</p> </question> <answer tick="true" vote="7"> <p>试试这个：</p> <pre><code>if (document.querySelector(&#39;input[type=checkbox]&#39;).checked) { </code></pre> <h2>演示<a href="http://jsfiddle.net/o51cw8rc/" rel="nofollow">这里</a></h2> <p>代码建议：</p> <pre><code>&lt;input type=&#34;checkbox&#34; /&gt;Checkbox&lt;br/&gt; &lt;span id=&#34;result&#34;&gt;&lt;/span&gt; &lt;script type=&#34;text/javascript&#34;&gt; window.onload = function () { var input = document.querySelector(&#39;input[type=checkbox]&#39;); function check() { var a = input.checked ? &#34;checked&#34; : &#34;not checked&#34;; document.getElementById(&#39;result&#39;).innerHTML = &#39;result &#39; + a; } input.onchange = check; check(); } &lt;/script&gt; </code></pre> <p>在您的帖子中，JavaScript 位于 HTML 之前，在这种情况下，HTML 应该位于第一个，以便 javascript 可以“找到它”。或者使用（如我的示例中的 <pre><code>window.onload</code></pre> 函数）在页面加载后运行代码。</p> </answer> <answer tick="false" vote="3"> <pre><code> $(&#39;#myForm&#39;).on(&#39;change&#39;, &#39;input[type=checkbox]&#39;, function() { this.checked ? this.value = &#39;apple&#39; : this.value = &#39;pineapple&#39;; }); </code></pre> </answer> <answer tick="false" vote="0"> <p>尝试这样的事情</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; function update_value(chk_bx){ if(chk_bx.checked) { var a=&#34;checked&#34;;} else{ var a=&#34;not checked&#34;; } document.getElementById(&#39;result&#39;).innerHTML =&#39;result &#39;+a; } &lt;/script&gt; &lt;input type=&#34;checkbox&#34; value=&#34;1&#34; onchange=&#34;update_value(this);&#34;/&gt;Checkbox&lt;br/&gt; &lt;span id=&#34;result&#34;&gt;&lt;/span&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>太复杂了。内联代码让它很酷。</p> <pre><code>&lt;input type=&#34;checkbox&#34; onclick=&#34;yourBooleanVariable=!yourBooleanVariable;&#34;&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>对于那些尝试了前面的选项但仍然因任何原因遇到问题的人，您可以使用 .prop() jquery 函数：</p> <pre><code>$(document.body).on(&#39;change&#39;,&#39;input[type=checkbox]&#39;,function(){ if ($(this).prop(&#39;checked&#39;) == 1){ alert(&#39;checked&#39;); }else{ alert(&#39;unchecked&#39;); } </code></pre> </answer> <answer tick="false" vote="-1"> <p>此代码将仅运行一次并检查初始复选框状态。您必须为 <pre><code>onchange</code></pre> 事件添加事件侦听器。</p> <pre><code>window.onload = function() { document.getElementByType(&#39;checkbox&#39;).onchange = function() { if(document.getElementByType(&#39;checkbox&#39;).checked) { var a=&#34;checked&#34;; } else { var a=&#34;not checked&#34;; } document.getElementById(&#39;result&#39;).innerHTML =&#39;result &#39;+a; } } </code></pre> </answer> </body></html>

用 javascript 监听 Symfony 制作的复选框的滴答声

我需要监听通过 Symfony5 formBuilder 和 sonataAdminBundle 界面中创建并显示在视图中的复选框的单击。这样做的目的是适应其他领域

WPF Listbox 多选与模板中的 CheckBox

我有一个带有数据模板的列表框，其中包含复选框和文本块。如何使用模板中的复选框进行多重选择，以便选择基于 isChecked pr...

选择 checkboxCombobox 的一个值

我正在使用几个复选框组合框。对于我的解决方案，这些框之一需要在特定情况下充当组合框。我只需要选择一个值。我尝试了以下方法： 私人...

在 php 中使用分页的多个复选框，而不使用 javascript 和 jquery

美好的一天，我有一个 HTML 表格，我在上面使用分页，以便只显示一定数量的项目。问题是我需要使用复选框进行多个选择，并且这适用于 si...

创建一本带有翻页功能的纯 HTML/CSS 书籍

所以我正在尝试用 HTML5 和 CSS3 创建一本完全不需要 JS 的虚拟书，实际上工作得很好，但我不希望它看起来像一张翻过的纸，但我希望它看起来像

如果未选中复选框，Php 会更新数据库

所以我有一个动态生成的表 所以我有一个动态生成的表 <tr> <td><?php echo $row['RequestID']?></td> <td><?php echo $row['FirstName'] . " " . $row['LastName']?></td> <td><?php echo $row['DateRequested']?></td> <td><?php echo $row['DateNeeded']?></td> <td><?php echo $row['TotalPrice']?></td> <td><?php echo $row['Company']?></td> <td><?php echo $row['Account']?></td> <td><?php echo $row['Brand']?></td> <td><?php echo $quantity?></td> <td><input type="checkbox" name="bill[]" value=<?php echo '"' . $row['RequestID'] . '"'; if($row['BillBack'] == "1") {echo "checked='checked'"; } ?></td> </tr> 我想在选中或取消选中一行时更新数据库。 if(isset($_POST['submit'])){//to run PHP script on submit if(!empty($_POST['bill'])){ // Loop to store and display values of individual checked checkbox. foreach($_POST['bill'] as $selected){ echo "hello"; $sql2 = "UPDATE Requests SET BillBack = '1' WHERE RequestID = '$selected'"; $result2 = $conn->query($sql2); }} elseif(empty($_POST['bill'])){ // Loop to store and display values of individual checked checkbox. foreach($_POST['bill'] as $selected){ echo "hello"; $sql2 = "UPDATE Requests SET BillBack = '0' WHERE RequestID = '$selected'"; $result2 = $conn->query($sql2); }} } 现在。 if 语句的作用就像一个魅力。对于提交中的每个选中的复选框，该记录都会更新。问题来自于取消选中复选框。正如您所看到的，通过查找不为空的内容来找到复选框。但是，当我删除该感叹号时，它并没有有效地起到相反的作用。它也不起作用，因为它有自己的 if 语句、直接的 else 语句以及检查 !isset。这是因为输入被视为检查的方式吗？有语法错误吗？我已经做了大约 5 个小时的错误检查、谷歌搜索，但我无法弄清楚。 谢谢大家 非常简单：只需将所有条目更新为 0，然后将选中的条目设置为 1。 //to run PHP script on submit if(isset($_POST['submit'])){ // Setting everyone to 0 $sql2 = "UPDATE Requests SET BillBack = '0'"; $result2 = $conn->query($sql2); // Setting only those checked to 1 if(!empty($_POST['bill'])){ // Loop to store and display values of individual checked checkbox. foreach($_POST['bill'] as $selected){ echo "hello"; $sql3 = "UPDATE Requests SET BillBack = '1' WHERE RequestID = '$selected'"; $result3 = $conn->query($sql3); } } } 编辑： 请注意，在 foreach 内进行查询可能会导致服务器过载，为避免这种情况，您可以存储要更新的条目 id，并仅在 foreach 外的一个查询中使用它： //to run PHP script on submit if(isset($_POST['submit'])){ // Setting everyone to 0 $sql2 = "UPDATE Requests SET BillBack = '0'"; // Maybe add a WHERE clause, like BizzyBob pointed out $result2 = $conn->query($sql2); // Setting only those checked to 1 if(!empty($_POST['bill'])){ // Initialize an array of selected ids $selected_ids = array(); // Loop to store individual checked checkboxes on array foreach($_POST['bill'] as $selected){ $selected_ids[] = $selected; } // Get the ids separated by comma $in_clause = implode(", ", $selected_ids); // Do only one sql query $sql3 = "UPDATE Requests SET BillBack = '1' WHERE RequestID in (".$in_clause.")"; $result3 = $conn->query($sql3); } } <input type="hidden" name="id" value="<?php echo $instructor['id']; ?>"> <label>Name: </label> <input type="text" name="name" value="<?php echo $instructor['name']; ?>" required><br><br> <label>E-mail:</label> <input type="email" name="email" value="<?php echo $instructor['email']; ?>" required><br><br> <!-- Designation --> <label>Designation:</label> <select name="designation" required> <option value="lecturer" <?php if ($instructor['designation'] == 'lecturer') echo 'selected'; ?>>Lecturer</option> <option value="senior lecturer" <?php if ($instructor['designation'] == 'senior lecturer') echo 'selected'; ?>>Senior Lecturer</option> <option value="demonstrator" <?php if ($instructor['designation'] == 'demonstrator') echo 'selected'; ?>>Demonstrator</option> <option value="attendant" <?php if ($instructor['designation'] == 'attendant') echo 'selected'; ?>>Attendant</option> </select><br><br> <label>Salary:</label> <input type="number" name="salary" value="<?php echo $instructor['salary']; ?>" step="0.01" required><br><br> <!-- Role checkboxes --> <label>Role:</label> <?php $roles = explode(',', $instructor['role']); ?> <input type="checkbox" name="role[]" value="teaching" <?php if (in_array('teaching', $roles)) echo 'checked'; ?>>Teaching <input type="checkbox" name="role[]" value="assisting" <?php if (in_array('assisting', $roles)) echo 'checked'; ?>>Assisting <input type="checkbox" name="role[]" value="supervising" <?php if (in_array('supervising', $roles)) echo 'checked'; ?>>Supervising<br><br> <!-- Submit button --> <input type="submit" value="Update"> </form>

如何记住每次翻页之间选定的复选框

我有一个带分页的列表视图。每个分页有 10 行，其中包含用户名、电子邮件和复选框。 我需要能够在不同的“分页”中选中几个复选框，按下按钮然后......

Nuxt3 Tanstack 表如何将复选框默认值设置为选中？

我现在正在使用 shadcn 数据表和 Tanstack 表。 我在第一列上有一个复选框，但我对如何默认选中所有复选框感到困惑。 并且还必须在

更改复选框日期值后弹出

在复选框中我有两个值（是/否）。默认值为“否”。将值从“否”交换为“是”后，应该会弹出今天的日期。我正在使用 TODAY() 函数...