精华内容
下载资源
问答
  • 2021-06-12 05:08:02

    考虑创建一个包含复选框组的FormGroup,并将组的选中值绑定到带有必需验证器的隐藏formcontrol.

    消耗你有三个复选框

    items = [

    {key: 'item1', text: 'value1'}, // checkbox1 (label: value1)

    {key: 'item2', text: 'value2'}, // checkbox2 (label: value2)

    {key: 'item3', text: 'value3'}, // checkbox3 (label: value3)

    ];

    第1步:为您的复选框定义FormArray

    let checkboxGroup = new FormArray(this.items.map(item => new FormGroup({

    id: new FormControl(item.key), // id of checkbox(only use its value and won't show in html)

    text: new FormControl(item.text), // text of checkbox(show its value as checkbox's label)

    checkbox: new FormControl(false) // checkbox itself

    })));

    *easy to show via ngFor

    步骤2:创建隐藏的必需formControl以保持复选框组的状态

    let hiddenControl = new FormControl(this.mapItems(checkboxGroup.value), Validators.required);

    // update checkbox group's value to hidden formcontrol

    checkboxGroup.valueChanges.subscribe((v) => {

    hiddenControl.setValue(this.mapItems(v));

    });

    we only care about hidden control’s required validate status and won’t show this hidden control in html.

    Step3:创建最终表单组包含下面的复选框组和隐藏的formControl

    this.form = new FormGroup({

    items: checkboxGroup,

    selectedItems: hiddenControl

    });

    Html模板:

    {{ control.controls.text.value }}

    checkbox group is required!


    {{form.controls.selectedItems.value | json}}

    参考这个demo.

    更多相关内容
  • 要实现一个包含多个复选框的下拉框该如何做呢? 先上个效果图吧: 代码: <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link ...
  • 判断多个checkbox复选框至少一个

    千次阅读 2019-07-23 16:52:37
    https://blog.csdn.net/muguli2008/article/details/51940408 ------------------... <h2>请选择您的爱好:</h2> <form action=""> <label><input type="checkbox" nam...

    https://blog.csdn.net/muguli2008/article/details/51940408

    ------------------html----------------------

    <h2>请选择您的爱好:</h2>
    <form action="">
    <label><input type="checkbox" name="hobby" value="上班" />上班</label>
    <label><input type="checkbox" name="hobby" value="运动" />运动</label>
    <label><input type="checkbox" name="hobby" value="看书" />看书</label>
    <label><input type="checkbox" name="hobby" value="上网" />上网</label>
    <label><input type="checkbox" name="hobby" value="网购" />网购</label>
    <label><input type="checkbox" name="hobby" value="其他" />其他</label>
    <input type="reset" value="重 置" />
    <input type="button"   οnclick="Submit()" value="提交选择" />
    </form>

    --------------js(jquery)-------------------

    var SelectFalse = false; //用于判断是否被选择条件
    function Submit()
    {
    var chboxValue = [];
    var CheckBox = $('input[name = hobby]');//得到所的复选框

    for(var i = 0; i < CheckBox.length; i++)
    {

    //jquery1.6以上可以if(CheckBox[i].prop('checked') == true)去判断checkbox是否被选中
    if(CheckBox[i].checked)//如果有1个被选中时
    {
    SelectFalse = true;
    chboxValue.push(CheckBox[i].value)//将被选择的值追加到
    }
    }

    if(!SelectFalse)
    {
    alert("对不起:爱好至少要选一项");
    return false
    }
    alert("您选择爱好对应的value是:"+chboxValue);
    }
     

    展开全文
  •  至少选择一个" onclick="oneMore()">    <input type="checkbox" name="all" value=""><br>  <input type="checkbox" name="all" value=""><br>  <input type="checkbox" name="all" value=""><br>  ...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>

     <script type="text/javascript">
     function oneMore(){
      var check=false;
      var oneMore=document.getElementsByName("all");
      for(var i=0;i<oneMore.length;i++){
       if(oneMore[i].checked){
        check=true;
        break;
       }
      }
      if(!check){
       alert("至少选择一个");
       return;
      }
      var c=confirm("是否删除");
      if(!c){
       return;
      }
      document.getElementById("form1").action="oneMore.html";
      document.getElementById("form1").submit();
     }
     </script>

     <BODY>
     <input type="button" value="至少选择一个" οnclick="oneMore()"><br>
     <form id="form1" action="oneMore.html">
      <input type="checkbox" name="all" value=""><br>
      <input type="checkbox" name="all" value=""><br>
      <input type="checkbox" name="all" value=""><br>
      <input type="checkbox" name="all" value=""><br>
      <input type="submit" value="submit"
      </form>
     </BODY>
    </HTML>

    展开全文
  • CheckBox复选框控件使用方法,具体内容如下 、简介 1、 2、类结构图 二、CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1、新建LinearLayout布局 2、建立CheckBox的XML的Layout文件...
  • 实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证...带数据验证和复选框的表单提交</title> [removed][removed] <style type="text/css"> table { border-collapse: collapse; } t
  • js中: 代码如下: function chooseOne(chk){ //先取得同name的chekcBox的集合... //若要至少選一個的話,則把上面那行else拿掉,換用下面那行 else obj[i].checked = true; } } jsp页面中: 代码如下: <input type
  • checkbox复选框不能为空,至少一个选项
  • 默认选中页面中实现!createPromoCodeForm.value2"> 使用ng-init给复选框对应的ng-model赋

    默认选中

    页面中实现

    <input type="checkbox" ng-model="createPromoCodeForm.value1" ng-false-value=false ng-init="createPromoCodeForm.value1=true" ng-required="!createPromoCodeForm.value2">
    • 使用ng-init给复选框对应的ng-model赋初值为true即可实现默认选中
      ng-true-value的默认值是true,当前复选框被选中时该model值为true

      ng-false-value的默认值是false,当前复选框未被选中时该model值为false

    controller中实现

    • 初始化页面时给input对应的ng-model赋值为true。
    $scope.createPromoCodeForm.value1=true;

    表单验证至少选中一项

    自己研究的方法…

    <input type="checkbox" ng-model="createPromoCodeForm.value1" ng-required="!createPromoCodeForm.value2">
    <input type="checkbox" ng-model="createPromoCodeForm.value2" ng-required="!createPromoCodeForm.value1">
    
    <input type="submit" ng-disabled="createPromoCodeForm.$invalid" class="btn btn-common" ng-value="'Submit'">

    描述:
    - 当需要输入框至少选中一项,可以用ng-required,判断其他项都未被选中时,此项设置为required,最后的提交按钮设置ng-disabled="createPromoCodeForm.$invalid",即可实现验证表单至少选中一项,否则禁止提交。


    END

    展开全文
  • 选择您的爱好:</h2> <form action="" method="post" id="form"> <label><input type="checkbox" name="hobby" value="上班" />上班</label> <label><i...
  • 代码如下: //是否被选中验证有选中的return true,否return false function ... } 这是一个比较不错的方法,收藏了。下面这个函数是对上面的补充: 代码如下:本来就是这种写法啊。jq1.42的写法。 其次,建议你的逻辑处
  •    <span class="GoodsBarCode" ><input type="checkbox" value="货品" />...//取到当前复选框选中的值  $("#BoxGroup:checkbox[checked]").each(function (i) {  ImportType= $(this).val();  });  
  • 通常来说,网页自动填表包含单选框、复选框、文本框、多行文本框、下拉列表框的自动填写。本文讲讲这些项目的自动填写方法。所用到的工具是网页自动操作通用工具。、文本输入框及多行文本输入框的自动填写下面来...
  • HTML选择三个不同的复选框并显示它们我需要什么,例如,如果我选择复选框Nº1,3和4,我需要看到:选择3个香水香水一生之热带Eau d'Issey2但是每次点击一个复选框,我会得到三个相同的结果。任何人都可以帮助我吗? ...
  • js判断是否至少选中一个复选框

    千次阅读 2017-09-28 11:35:21
    // 首先给复选框相同的name var cbs = document.getElementsByName("cbs"); var checkNum = 0; for (var i = 0; i ; i++) { if (cbs[i].checked) { checkNum++; } } alert("选中数量=" + checkNum)
  • 复选框checkbox,js验证必须选择一个

    千次阅读 2019-06-21 10:39:03
     alert("搜尋欄2至少选择一个!!");  return false;  } html:    $other_query = RunQuery("select * from `other_val` where `type`='district'");  while ($other = mysql_fetch_assoc($other_...
  • js判断复选框至少选择一个

    千次阅读 2017-09-11 18:00:27
    直接上干货 var cbs = document.getElementsByName("flow[]"); var checkNum = 0; for (var i = 0; i ; i++) { if (cbs[i].checked) { checkNum++; } ... alert('至少选择一个'); }
  • checkbox 复选框选择一个

    千次阅读 2016-12-29 15:17:47
    function chooseOne(chk){  //先取得同name的chekcBox的集合物件  var obj = document.getElementsByName("chk");... //判斷obj集合中的i元素是否為cb,若否則表示未被點  if (obj[i]!=chk) obj[i].checke
  • html 复选框 选中一个

    千次阅读 2020-05-10 11:10:20
    function changeCheckbox(){ $('input[type="checkbox"]').on('change', function() { $('input[type="checkbox"]').not(this).prop('checked', false);}); } 如图效果:
  • 选择您的爱好:</h2> <form action="" method="post" id="form"> <label><input type="checkbox" name="hobby" value="上班" />上班</label> <label><input type=...
  • 实现这样一个基本需求,页面有很多数据,可以删除一条或多条,删除前判断是否选中至少一条,否则提示。 代码如下: function deleteUser() { //当时是想把内容以str+=””的方式 进行保存 ,但不行 //var str; var ...
  • functiontoggle(source){checkboxes=document.getElementsByName('foo');for(varcheckboxincheckboxes)checkbox.checked=source.checked;}ToggleAllBar1Bar2Bar3Bar4最新情况:这for each...in构造在Safa...
  • 单选按钮验证、下拉框验证、判断是否选择至少一个CheckBox
  • 例子里面包括了一下几功能。  &lt;input type="button" id="btn1" value="全选"&gt;  &lt;input type="button" id="btn2" value="取消全选...
  • 判断复选框至少项 window.onload=function(){ var checkboxs=document.getElementsByName("checkselect"),submitbtn=document.getElementById("submitbtn"); submitbtn.onclick=function(){
  • easyUI datagrid复选框获取选中行

    千次阅读 2019-07-05 16:12:28
    getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。 getSelections:取得所有选中行数据,返回元素记录的数组数据。 getChecked:取得checkbox选择行的数据,返回元素记录的数组数据...
  • 、React + antd 中 的 CheckBox 实现限制复选框可选的个数 1.优化后的代码 3行 实现: 代码如下(示例): import React, { useState, useEffect } from "react"; import { Checkbox } from "antd-mobile"; // ...
  • 复选框checkbox选中数限制

    千次阅读 2019-10-08 07:05:41
    今天遇到一个问题:就是项目里有用到限制 checkbox选中个数,看起来很简单,但是确实花了点时间才弄清楚,废话不多说,上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,099
精华内容 8,839
关键字:

至少选择一个复选框

友情链接: ns-tutorial.odt.rar