Jquery Angular2如何获取所有选定复选框

所以我正在开发Angular2应用程序。 我有一个表格，每个记录代表一个学生，并包含一个复选框

<input class="mycheckbox" type="checkbox" [value]='student.StudentId'>

---

我最近回答了一个类似的问题：

您可以在模板中执行以下操作：

<input class="mycheckbox" type="checkbox" [(ngModel)]="student.selected">{{student.StudendId}}

---

另一种方法是：

.html

全部
没有一个

在.ts文件中

abc:Array<any>= [];
checkedStudents(value) {
        console.log(value);
        if ((<HTMLInputElement>document.getElementById(value)).checked === true) {
            this.abc.push(value);
        }
        else if ((<HTMLInputElement>document.getElementById(value)).checked === false) {
            let indexx = this.abc.indexOf(value);
            this.abc.splice(indexx,1)
        }
        console.log(this.abc)
    }

// for Bulk actions

bulk(a) {
        // console.log(a);
        if (a == "all") {
            console.log("yes all");
            this.abc = [];
            for (let i = 0; i < this.student_list.length; i++) {
                (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = true;
                this.abc.push(this.student_list[i].id);
            }
        }
        if (a == "none") {
            for (let i = 0; i < this.student_list.length; i++) {
                (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = false;
            }
            this.abc = [];
        }
        console.log(this.abc);
    }

abc:Array=[]；
检查学生（价值）{
console.log（值）；
if（（document.getElementById（value））.checked==true）{
这个.abc.push（值）；
}
else if（（document.getElementById（value））.checked==false）{
设indexx=this.abc.indexOf（值）；
此.abc.拼接（indexx，1）
}
console.log（this.abc）
}
//用于批量操作
散装（a）{
//控制台日志（a）；
如果（a=“全部”）{
控制台日志（“全部是”）；
这个.abc=[]；
for（设i=0；i

只需在按钮上添加一个条件，并记住检查复选框字段的“值”，如下所示：

<form 
    #f="ngForm"  
    (ngSubmit)="onSubmit(f.value)" >

    <div class="form-group">

        <h2>Enter Email for Newsletter :</h2> <br/>

        <input 

            #registrationemail="ngForm"
            ngControl="registrationemail" 

            placeholder="Email Address"
            required type="email" 
            class="form-control" 
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"  />

        <div *ngIf="registrationemail.touched && registrationemail.errors" class="alert alert-danger">
            <div  *ngIf="registrationemail.errors.required" >An Email is required</div>
            <div  *ngIf="registrationemail.errors.pattern">Email is invalid</div>
        </div>

    </div>

    <div class="form-group">


        <input 
        id="accepttermsconditions"
        #accepttermsconditions="ngForm"
         ngControl="accepttermsconditions" 
        type="checkbox" 
        checked/>
        <label for="accepttermsconditions">Accept Terms and Conditions </label> 
        </div>

    <button
       [disabled]="!f.valid || 
        !accepttermsconditions.value"
      class="btn btn-primary" 
      type="submit">Submit </button>

</form>

输入新闻稿的电子邮件：

需要一封电子邮件
电子邮件无效
接受条款和条件
提交

您也可以使用“formbuilder”以类似于我的上一个版本的方式来完成。张贴如下：

import {Component, OnInit} from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from '@angular/common';

@Component({
    selector: 'registration-form',
    directives: [FORM_DIRECTIVES],
    template: `

    <form 
    [ngFormModel]="myForm" 
        (ngSubmit)="onSubmit(myForm.value)" 
        class="ui form"> 

          <div class="form-group">
     <label for="registrationemailInput">EMail Address</label>  
     <input type="email"  
            required
            id="registrationemailInput" 
            placeholder="email address"  
            [ngFormControl]="myForm.controls['registrationemail']"
            class="form-control" 
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
             />


                <div *ngIf="myForm.controls['registrationemail'].touched && myForm.controls['registrationemail'].errors" class="alert alert-danger">
            <div  *ngIf="myForm.controls['registrationemail'].errors.required" >An Email is required</div>
            <div  *ngIf="myForm.controls['registrationemail'].errors.pattern">Email is invalid</div>
        </div>

            </div>

            <div class="form-group">
            <label for="termsandconditions">Accept Terms &amp; Conditions</label>
      <input  id="termsandconditions"
                type="checkbox"
                checked      
                [ngFormControl]="myForm.controls['accepttermsconditions']" 
                id="accepttermsconditions"
      />
      </div>

      <button 

       [disabled]="!myForm.valid || !myForm.controls['accepttermsconditions'].value"

            class="btn btn-primary"  
            type="submit">Submit</button>
     </form>`
})
export class FormbuilderComponent implements OnInit {

    myForm: ControlGroup;

    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            'registrationemail': ['test'],
            'accepttermsconditions': [true]
        })
    }

    ngOnInit() {
    }


    onSubmit(form: any): void {
        console.log('you submitted value:', form);
    }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/common”导入{FORM_指令、FormBuilder、ControlGroup}；
@组成部分({
选择器：'登记表'，
指令：[形式指令]，
模板：`
电子邮件地址
需要一封电子邮件
电子邮件无效
接受条款和条件
提交
`
})
导出类FormbuilderComponent在NIT上实现{
myForm：对照组；
构造函数（fb:FormBuilder）{
this.myForm=fb.group({
“注册邮件”：[“测试”]，
“accepttermsconditions”：[正确]
})
}
恩戈尼尼特（）{
}
提交（形式：任何）：无效{
log（'您提交的值：'，表单）；
}
}

PrimeNG DataTable将此功能作为一项内置功能。只需将selectionMode设置为multiple，即可获得基于复选框的选择。现场演示在

对于那些正在使用列表的用户，我只是简化了一点 值对象。 XYZ.comont.html

选项：
{{option.Id}--{{option.checked}
提交

关于

ng模型

，您可以使用它吗？您可以创建一个JSFIDLE吗？对于this@Jai我怎样才能使用ng模型？@charlietfl当然不应该。“我的意思是我正在寻找类似的东西。我相信它现在应该是[（ngModel）]。”pradeep，你为我节省了很多时间。谢谢

abc:Array<any>= [];
checkedStudents(value) {
        console.log(value);
        if ((<HTMLInputElement>document.getElementById(value)).checked === true) {
            this.abc.push(value);
        }
        else if ((<HTMLInputElement>document.getElementById(value)).checked === false) {
            let indexx = this.abc.indexOf(value);
            this.abc.splice(indexx,1)
        }
        console.log(this.abc)
    }

// for Bulk actions

bulk(a) {
        // console.log(a);
        if (a == "all") {
            console.log("yes all");
            this.abc = [];
            for (let i = 0; i < this.student_list.length; i++) {
                (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = true;
                this.abc.push(this.student_list[i].id);
            }
        }
        if (a == "none") {
            for (let i = 0; i < this.student_list.length; i++) {
                (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = false;
            }
            this.abc = [];
        }
        console.log(this.abc);
    }

<form 
    #f="ngForm"  
    (ngSubmit)="onSubmit(f.value)" >

    <div class="form-group">

        <h2>Enter Email for Newsletter :</h2> <br/>

        <input 

            #registrationemail="ngForm"
            ngControl="registrationemail" 

            placeholder="Email Address"
            required type="email" 
            class="form-control" 
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"  />

        <div *ngIf="registrationemail.touched && registrationemail.errors" class="alert alert-danger">
            <div  *ngIf="registrationemail.errors.required" >An Email is required</div>
            <div  *ngIf="registrationemail.errors.pattern">Email is invalid</div>
        </div>

    </div>

    <div class="form-group">


        <input 
        id="accepttermsconditions"
        #accepttermsconditions="ngForm"
         ngControl="accepttermsconditions" 
        type="checkbox" 
        checked/>
        <label for="accepttermsconditions">Accept Terms and Conditions </label> 
        </div>

    <button
       [disabled]="!f.valid || 
        !accepttermsconditions.value"
      class="btn btn-primary" 
      type="submit">Submit </button>

</form>

import {Component, OnInit} from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from '@angular/common';

@Component({
    selector: 'registration-form',
    directives: [FORM_DIRECTIVES],
    template: `

    <form 
    [ngFormModel]="myForm" 
        (ngSubmit)="onSubmit(myForm.value)" 
        class="ui form"> 

          <div class="form-group">
     <label for="registrationemailInput">EMail Address</label>  
     <input type="email"  
            required
            id="registrationemailInput" 
            placeholder="email address"  
            [ngFormControl]="myForm.controls['registrationemail']"
            class="form-control" 
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
             />


                <div *ngIf="myForm.controls['registrationemail'].touched && myForm.controls['registrationemail'].errors" class="alert alert-danger">
            <div  *ngIf="myForm.controls['registrationemail'].errors.required" >An Email is required</div>
            <div  *ngIf="myForm.controls['registrationemail'].errors.pattern">Email is invalid</div>
        </div>

            </div>

            <div class="form-group">
            <label for="termsandconditions">Accept Terms &amp; Conditions</label>
      <input  id="termsandconditions"
                type="checkbox"
                checked      
                [ngFormControl]="myForm.controls['accepttermsconditions']" 
                id="accepttermsconditions"
      />
      </div>

      <button 

       [disabled]="!myForm.valid || !myForm.controls['accepttermsconditions'].value"

            class="btn btn-primary"  
            type="submit">Submit</button>
     </form>`
})
export class FormbuilderComponent implements OnInit {

    myForm: ControlGroup;

    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            'registrationemail': ['test'],
            'accepttermsconditions': [true]
        })
    }

    ngOnInit() {
    }


    onSubmit(form: any): void {
        console.log('you submitted value:', form);
    }
}