标签: checkbox

我想完成，当我尝试选中复选框时，它会显示弹出窗口。然后，有“是”和“否”两个选项。当我单击“是”复选框时，将选中并关闭弹出窗口。如果我选择“否”复选框将取消选中并关闭弹出窗口。给我一个帮助。示例代码在这里

Javascript

$(document).ready(function () {
$('#chkBox').click(function () {
    if ($(this).is(':checked')) {
        $("#txt").dialog({
            close: function () {
                $('#chkBox').prop('checked', false);
            }
        });
    } else {
        $("#txt").dialog('close');
    }
});
});

HTML

<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
  <div id="txt" style="display: none;">
       <button>Yes</button>
        <button>NO</button>
  </div>

现场示例：http : //jsfiddle.net/5vy1m233/37/

请帮忙。谢谢你。

在 UWP 中，我使用带有项目模板的多选 ListView，如下所示：

    <ListView 
        ItemsSource="{x:Bind ItemsSource, Mode=OneWay}" 
        ItemTemplate="{x:Bind LineTemplate, Mode=OneWay}"
        SelectionMode="Multiple"
        >
    </ListView>

问题是UWP添加的复选框的样式。在我程序的其余部分中，我有自己的复选框样式，而 ListView 中的样式不匹配。

我看不到任何设置复选框样式的方法，也看不到 ListViewItem 模板中 ListViewItemPresenter 的任何代码。

也许我可以设置 IsMultiSelectCheckBoxEnabled="False"，然后在 ListViewItem 中包含我自己的 CheckBox。我看到了如何在 ListViewItem 样式中将 CheckBox 添加到模板中：我可以将它放在 ListViewItemPresenter 之前（例如使用水平 StackPanel）。然后我可以绑定 IsChecked="{TemplateBinding IsSelected}"。

但是，如果我这样做，则会出现异常“ListViewItemPresenter 只能用作 ListViewItem 模板中的第一个子项”。

有没有或多或少简单的方法来做到这一点？

--sjb

PS 显然 ListViewItemPresenter 非常特别......我的印象是它内置了很多优化，不应该只是扔掉。

预期行为

我在 div 元素中有一个复选框。我希望框和 div 都是可点击的。

• 当用户单击复选框时，会向 div 添加一个类以更改其背景颜色。如果再次单击该复选框，则该类将被删除。
• 单击 div 本身时，会根据需要添加或删除具有背景颜色的类，并且选中或取消选中复选框

目前，我使用普通 javascript 完成了大部分工作：

function boxPress(markNumber) {
  var checkbox = "mark" + markNumber;
  var element = document.getElementById(checkbox);
  var markbox = "markbox" + markNumber;
  if (element.getAttribute("checked") == null) {
    element.setAttribute("checked", "checked");
    document.getElementById(markbox).classList.add('checked');
  } else {
    element.removeAttribute("checked");
    document.getElementById(markbox).classList.remove('checked');
  }
}

.mark {
  margin-bottom: 5px;
  margin-top: 5px;
  background-color: #FFFFFF;
  border-width: 2px;
  border-radius: 0px 5px 5px 0px;
  border-left-style: solid;
  border-left-width: 10px;
  border-color: lime;
  overflow: auto;
  padding: 2%;
  transition: background-color 0.5s linear 0s; …

如果我选中左边的复选框之一，我希望它旁边的复选框将被启用。如果我取消选中左侧复选框之一，则应再次禁用它旁边的复选框：

$('input[type="checkbox"]').change(function () {
   $("input:checkbox:checked:not(.delivery)").each(function () {
      if ($("input:checkbox:checked").length > 0) {
        $(this).closest("tr").children('.disable').removeAttr("disabled");
      } else {
         $(this).closest("tr").children('.disable').addAttr("disabled");
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
   <td><input  type="checkbox"></td>
   <td><input class="disable" disabled="" type="checkbox"></td>
</tr>
<br>
<tr>
  <td><input  type="checkbox"></td>
  <td><input class="disable" disabled="" type="checkbox"></td>
</tr>

使用我的代码，它保持禁用状态。

我有 4 个复选框，每个对应的标签是一个超链接，可将用户带到该特定主题的起始页。所以基本上选择复选框有不同的功能，同时激活链接执行另一个功能。我知道这不是推荐的做法，但我可以根据任何 WCAG 标准对其进行标记吗？

我在我的 tableView 中实现了布尔表示作为复选框。它通常工作正常，但非常令人恼火的事实是它需要关注行（编辑）以应用复选框值的更改。这意味着我首先必须双击该字段，然后单击复选框。

如何使复选框更改立即执行 onEditCommit？

public class BooleanCell<T> extends TableCell<T, Boolean> {
private CheckBox checkBox;

public BooleanCell() {
    checkBox = new CheckBox();
    checkBox.selectedProperty().addListener(new ChangeListener<Boolean>() {
        public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
            if (isEditing())
                commitEdit(newValue == null ? false : newValue);
        }
    });
    setAlignment(Pos.CENTER);
    this.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
    this.setEditable(true);
}

@Override
public void updateItem(Boolean item, boolean empty) {
    super.updateItem(item, empty);
    if (empty) {
        setGraphic(null);
    } else {
        checkBox.setSelected(item);
        setGraphic(checkBox);
    }
}

}

我正在尝试增加材质复选框的大小。

transform似乎增加了材质复选框的大小。但是，我不确定这是否是实现这一目标的正确方法？

CSS

 ::ng-deep .mat-checkbox .mat-checkbox-frame {
     transform: scale(2);
 }

 ::ng-deep .mat-checkbox-checked .mat-checkbox-background {
     transform: scale(2);
 }

我有很多复选框，因为您可以看到上传的图片，请先查看图片。

现在的问题是，您可以看到 3 张卡片视图条件、过敏症和既往手术史。并且所有这些卡片都包含复选框，现在发生的情况是，当我选中或取消选中条件卡中的任何框时，它可以正常工作，但是当我选中或取消选中过敏或过去手术卡中的框时，框的 UI 不会改变直到我单击条件框。

我做错了什么，我也会分享复选框代码。

状况

Checkbox(
              value: condition.selected,
              onChanged: (value) {
                setState(() {
                  _conditions[i].selected = value;
                });
              }),

过敏

Checkbox(
              value: allergy.selected,
              onChanged: (value) {
                _allergies[i].selected = value;

              }),

过去的手术

Checkbox(
              value: surgery.selected,
              onChanged: (value) {
                _surgeries[i].selected = value;
              
              }),

请帮我...

我必须制作一个由一系列动态创建的复选按钮组成的表单。我的灵感来自一个网站的代码，但它总是给我这个错误：“找不到名称为'0'的控件”。我该如何解决？谢谢你们！

代码打字稿：

import { Component, OnInit, Input } from '@angular/core';import { FiguraProfessionale } from 'src/app/model/FiguraProfessionale';
import { FiguraProfessionaleCompetenza } from 'src/app/model/FiguraProfessionaleCompetenza';
import { Competenza } from 'src/app/model/Competenza';
import { AssociaFiguraProfessionaleCompetenzeServiceService } from '../associa-figura-professionale-competenze-service.service';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-associa-figura-professionale-competenze',
  templateUrl: './associa-figura-professionale-competenze.component.html',
  styleUrls: ['./associa-figura-professionale-competenze.component.css']
})
export class AssociaFiguraProfessionaleCompetenzeComponent implements OnInit {

  figuraProfessionaleCompetenza: FiguraProfessionaleCompetenza;

  listaFiguraProfessionale: Array<FiguraProfessionale>;

  listaCompetenza: Array<Competenza>;

  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private servizio: AssociaFiguraProfessionaleCompetenzeServiceService, private route: …