How to check checkboxes after submiting as same as previously checked?

case is , First I checked few check box and than submit it , even after clicking on submit the checkbox should be checked as previously selected. Please help me in achieving it. For example have a look at Custom filter in stack overflow this is my HTML code:

<form asp-controller="Student" asp-action="FilterStu">
                    <div class="dropdown">
                        <div class="selectBox" onclick="showCheckboxes()">
                            <select class="btn btn-outline-secondary">
                                <option style="color:darkturquoise">
                                    Filter
                                </option>
                            </select>
                            <div class="overSelect"></div>
                        </div>
                        <div id="checkboxes" class="dropdown-content" >
                            <ul>
                                <label clasenter image description heres="labelclass" style="color:cornflowerblue"><u><i class="bi bi-book-half"></i>Courses</u></label>
                                <li>
                                    <input class="cb" name="searchString1" type="checkbox" id="Int" value="Java" />&nbsp;&nbsp;Java
                                </li>
                                <li>
                                    <input name="searchString2" type="checkbox" id="Int" value="C+" />&nbsp;&nbsp;C++
                                </li>
                                <li>
                                    <input name="searchString3" type="checkbox" id="Int" value="Python" />&nbsp;&nbsp;Python
                                </li>
                                <label style="color:cornflowerblue"><i class="bi bi-people"></i> <u>Gender</u></label>
                                <li>
                                    <input name="gender" type="checkbox" id="Int" value="Male" />&nbsp;&nbsp;Male
                                </li>
                                <li>
                                    <input name="gender" type="checkbox" id="Int" value="Female" />&nbsp;&nbsp;Female
                                </li>
                                <label style="color:cornflowerblue"><i class="bi bi-sort-alpha-down"></i><u>Sorting</u></label>
                                <li>
                                    <input name="sortByAz" type="checkbox" id="Int" value="sort" />&nbsp;&nbsp;Sort by A-Z
                                </li>
                                <li>
                                    <input name="sortByZa" type="checkbox" id="Int" value="sort" />&nbsp;&nbsp;Sort by Z-A
                                </li>
                                </p>
                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i>&nbsp;&nbsp;</button>
                                <button class="btn btn-outline-warning" type="submit" asp-action="Index" asp-controller="Student"><i class="bi bi-house"></i>Clear</button>
                            </ul>
                        </div>
                    </div>
                </form>

I tried creating arrays of checked items and Creating Viewbag for each

Use checkbox state to determine attribute of another XML element

I have a checkbox and a button in the same layout like in the sample code below. I want to make the button clickable only if checkbox is checked. I need to do it in XML without use of any listeners. The xmlbelow results in Cannot find identifier 'myCheckbox'

                <CheckBox
                    android:id="@+id/myCheckbox"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <Button
                    android:id="@+id/myButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clickable="@{myCheckbox.checked ? true : false}" />

I also tried to turn around the approach and call modifyButtonState, but it seems to never be called. There is no errors shown, but the method is not executed.

                  <CheckBox
                        android:id="@+id/myCheckbox"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"                        
                        android:onCheckedChanged="@{()->handler.modifyButtonState()}" />

Jquery form reset function doesn't reset checkboxes

I have a form that contains checkboxes, and from the script I check and uncheck them according to some requirements. at a certain point I reset the form $("#formId")[0].reset(), all inputs get reseted exept for checkboxes!!

I reseted the form but checkboxes didn't get reseted.

I have two interdependent checkboxes where 1st checkbox have api call on change event and 2nd gets populated. I need to remember checked items of 2nd

I have two interdependent multiselect checkboxes dropdowns where 1st checkbox have api call on change event and 2nd gets populated. So whenever i check items from 2nd dropdown and I decide to check another item from 1st dropdown my checked items from 2nd dropdown gets re populated with fresh data. I need to remember checked items from 2nd dropdown doesn't matter how many times I recheck items of 1st dropdown.

HTML

                <label class="form-label">Clients<span class="mandatory">*</span></label>
            
                <div class="accordion" id="accordionExample">
                    <div class="card">
                        <div class="" id="headingOne">
                            <h2 class="mb-0">
                                <button [class.ifinvalid]="clientError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
                                    type="button" (click)="showClient = true" data-toggle="collapse" data-target="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
                                    <div style="color:black">Select Clients</div>
                                    <img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
                                        alt="">
            
                                </button>
                            </h2>
                        </div>
            
                        <div id="collapseOne" *ngIf="showClient" class="collapse" aria-labelledby="headingOne"
                            data-parent="#accordionExample">
            
                            <div class="" style="color: #495057;border-top: 1px solid #dedede;">
                                <div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
            
                                    <label class="custom-control material-checkbox d-flex">
                                        <input type="checkbox" [(ngModel)]="masterSelectedClient" name="list_name_tech" value="m1"
                                            (change)="checkUncheckAllClient()" />
                                        <span class="material-control-description btn"
                                            style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
                                        <span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
                                            )</span>
                                        <span class="material-control-indicator"></span>
                                        <input type="text" class="localSearchInput form-control" [(ngModel)]="searchClient"
                                            name="searchClient" placeholder="Search"
                                            style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
            
            
                                    </label>
                                </div>
            
            
                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
                                    <div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
                                       >
                                        <li class="list-group-control"
                                            *ngFor="let client of clientCollection| searchdata: searchClient">
            
                                            <label class="custom-control material-checkbox d-flex">
                                                <input name="" type="checkbox"
                                                    (change)="onChangeSelectClient($event,client)" class="material-control-input"
                                                    [checked]="client.clientCode == true" style="margin-left: 2px;">
                                                <span class="material-control-description"
                                                    style="margin-left: 10px;"></span>
                                                <span class="material-control-indicator"></span>
            
            
            
            
                                            </label>
                                        </li>
                                    </div>
                                </div>
            
                            </div>
            
                        </div>
                    </div>
            
            
                </div>

                <div class="errorDiv" *ngIf="submitClicked && clientError">
                    <small class="text-danger" *ngIf="clientError">Client is required</small>                        
                </div>
            </div>


            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" (clickOutside)="showtech = false" style="margin-bottom: 20px;">

                <label class="form-label">Project<span class="mandatory">*</span></label>
            
                <div class="accordion" id="accordionExample">
                    <div class="card">
                        <div class="" id="headingOne">
                            <h2 class="mb-0">
                                <button [class.ifinvalid]="techError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
                                    type="button" (click)="showtech = true" data-toggle="collapse" data-target="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
                                    <div style="color:black">Select Project</div>
                                    <img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
                                        alt="">
            
                                </button>
                            </h2>
                        </div>
            
                        <div id="collapseOne" *ngIf="showtech" class="collapse" aria-labelledby="headingOne"
                            data-parent="#accordionExample">
            
                            <div class="" style="color: #495057;border-top: 1px solid #dedede;">
                                <div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
            
                                    <label class="custom-control material-checkbox d-flex">
                                        <input type="checkbox" [(ngModel)]="masterSelectedTech " name="list_name_tech" value="m1"
                                            (change)="checkUncheckAllTech()" />
                                        <span class="material-control-description btn"
                                            style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
                                        <span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
                                            )</span>
                                        <span class="material-control-indicator"></span>
                                        <input type="text" class="localSearchInput form-control" [(ngModel)]="searchTech"
                                            name="searchTech" placeholder="Search"
                                            style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
            
            
                                    </label>
                                </div>
            
            
                                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
                                    <div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
                                       >
                                        <li class="list-group-control"
                                            *ngFor="let tech of adminTechCollection| searchdata: searchTech">
            
                                            <label class="custom-control material-checkbox d-flex">
                                                <input name="" type="checkbox"
                                                    (change)="onChangeSelectTech($event,tech)" class="material-control-input"
                                                    [checked]="tech.technologyCode == true" style="margin-left: 2px;">
                                                <span class="material-control-description"
                                                    style="margin-left: 10px;"></span>
                                                <span class="material-control-indicator"></span>
            
            
            
            
                                            </label>
                                        </li>
                                    </div>
                                </div>
            
                            </div>
            
                        </div>
                    </div>
            
            
                </div>

                <div class="errorDiv" *ngIf="submitClicked && techError">
                    <small class="text-danger" *ngIf="techError">Project is required</small>                        
                </div>
            </div>

TS `

 /*----------------------------Function to get Checkbox ID's(Project)-------------------------*/

  onChangeSelectTech(event, tech: any, masterSelectedTech: any) {
    this.techError = false;

    if (masterSelectedTech !== undefined) {
      if (!masterSelectedTech) {
        let removeIndex = this.tempArr1.tech.findIndex(
          (itm) => itm.projectId === tech.projectId
        );
        if (removeIndex == -1) {
          const obj = {
            projectId: tech.projectId,
          };
          this.tempArr1.tech.push(obj);
        }
      } else {
        let removeIndex = this.tempArr1.tech.findIndex(
          (itm) => itm.projectId === tech.projectId
        );
        if (removeIndex !== -1) {
          this.tempArr1.tech.splice(removeIndex, 1);
        }
      }
    } else {
      if (event.target.checked) {
        let removeIndex = this.tempArr1.tech.findIndex(
          (itm) => itm.projectId === tech.projectId
        );
        if (removeIndex == -1) {
          const obj = {
            projectId: tech.projectId,
          };
          this.tempArr1.tech.push(obj);
          // PGCS
          // this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
          this.adminTechCollection[tech.indexCount - 1].technologyCode = true;

        }
      } else {
        let removeIndex = this.tempArr1.tech.findIndex(
          (itm) => itm.projectId === tech.projectId
        );
        if (removeIndex !== -1) {
          // PGCS
          // this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
          // console.log( );
          
          this.adminTechCollection[tech.indexCount - 1].technologyCode = false;


          this.tempArr1.tech.splice(removeIndex, 1);
        }
      }
    }

    if (masterSelectedTech === undefined) {
      if (this.adminTechCollection.length == this.tempArr1.tech.length) {
        this.masterSelectedTech = true;
      } else {
        this.masterSelectedTech = false;
      }
    }
    if (this.tempArr1.tech.length == 0) {
      this.techAddError = false;
    }
    console.log(this.tempArr1.tech);
    
  }

  /*----------------------------Function to get Checkbox ID's(Client)-------------------------*/

  onChangeSelectClient(event, client: any, masterSelectedClient: any) {
    this.clientError = false;

    if (masterSelectedClient !== undefined) {
      if (!masterSelectedClient) {
        let removeIndex = this.tempArr2.client.findIndex(
          (itm) => itm.clientId === client.clientId
        );
        if (removeIndex == -1) {
          const obj = {
            clientId: client.clientId,
          };
          this.tempArr2.client.push(obj);
        }
      } else {
        let removeIndex = this.tempArr2.client.findIndex(
          (itm) => itm.clientId === client.clientId
        );
        if (removeIndex !== -1) {
          this.tempArr2.client.splice(removeIndex, 1);
        }
      }
    } else {
      if (event.target.checked) {
        let removeIndex = this.tempArr2.client.findIndex(
          (itm) => itm.clientId === client.clientId
        );
        if (removeIndex == -1) {
          const obj = {
            clientId: client.clientId,
          };
          this.tempArr2.client.push(obj);
          // PGCS
          // this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
          this.clientCollection[client.indexCount - 1].clientCode = true;

        }
      } else {
        let removeIndex = this.tempArr2.client.findIndex(
          (itm) => itm.clientId === client.clientId
        );
        if (removeIndex !== -1) {
          // PGCS
          // this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
          this.clientCollection[client.indexCount - 1].clientCode = false;


          this.tempArr2.client.splice(removeIndex, 1);
        }
      }
    }

    if (masterSelectedClient === undefined) {
      if (this.clientCollection.length == this.tempArr2.client.length) {
        this.masterSelectedClient = true;
      } else {
        this.masterSelectedClient = false;
      }
    }
  
     console.log(this.tempArr2);
    
  this.passedArray = this.tempArr2.client.map(function(element){
    return `${element.clientId}`;
})
  console.log(this.passedArray)
    this.selectChangeHandler(event);
  }

//Api call change function

 selectChangeHandler(event:any){
    console.log("weee");
    // this.tempArr1.tech=[]
    this.clientId = event.target.value;
    this.api.GetProjectList(this.passedArray).subscribe({
      next:(data:any)=>{
        if (data.success) {
          console.log(data);
          this.adminTechCollection = [];
          for (let i = 0; i < data.data.length; i++) {
            this.adminTechCollection.push(data.data[i]);
            
          }
          console.log(this.adminTechCollection);
          
        } 
      }
    })
    
  }

`

PowerApps Gallery checkbox - Make button visible

I am creating a canvas powerapp with multiple items to be edited on a screen. I have a gallery with these multiple items, each item has a check box. I need to make a button visible if at least one of the checkbox is checked. How can I achieve this?

if checkbox checked not working in Opencart

I need to add checkbox to order process in Opencart 1.5.6.4 and ask "if checkbox is checked".

I add this checkbox to template/checkout/confirm.tpl

<input type="checkbox" name="test">

When I use the condition in controller/checkout/confirm.php if (isset($_POST['test'])) this condition not working, it is always false even if checkbox is checked.

Is it possible to use another way to create a condition if the checkbox is checked?

Typescript/CSS : Checkbox colour isn't right and is not aligned in the center

I'm working on a project where I have to build a check box which has its label is aligned vertically center to the checkbox and the colour on selecting is black, neither of which is happening. Here is my code

import React from "react";

import './checkbox.less';

interface props {
  label: string;
}

const Checkbox:React.FC<props> = ({label }) => (
    <div className="flex">
      <div>
        <input
          type="checkbox"
          id={label}
          className = "container"
        />     
        <label htmlFor={label}>{label}</label> 
      </div>
    </div>
  )
export default Checkbox;

CSS File :

.App {
    font-family: sans-serif;
    text-align: center;
  }

  .container {
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    color: black;
    vertical-align:middle;
  }
  
  .flex{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    vertical-align:middle;
  }

I tried changing them by adding the properties, but it didn't quite work. Please help

Dynamically update a Bar Chart by user selecting checkboxes in Google Sheets

I have a horizontal bar chart where one of the bars on the chart needs to be dynamic based on a user selection of checkboxes in a google sheet. I can get this to work with one checkbox "=IF(C5=TRUE,D5+100,100)" but not sure how to get to work when multiple check boxes are selected.

enter image description here

I have a "Base UPH" of 100 and just need to add the values in the "Multiplier" column if the checkbox(s) are TRUE. The idea is that the user could select one or all of the checkboxes and see how the "C-Dynamic" would be improved.

Any tips, much appreciated Thanks!

Able to get to work, but only for a single checkbox with this formula: =IF(C5=TRUE,D5+100,100)

Delete a list that is checked

was doing some javascript. I have a list that people can add but when the list is checked i want to delete it. So when is not check i don't have to delete it.

function ClearList(){
    if(checkBox.checked){
        bodyTask.innerHTML = "";
    }
}

But doing this it deletes me everything.

I was trying to do some for-loops but didn't work.

Check Box isn't Displaying

I can't get the checkbox to work correctly I'm trying to make a newsletter subscribe area but the checkbox isn't displaying and the text-"daily newsletter" is moved over, please help my code is:

form {
  border: 4px solid #f1f1f1;
  padding-bottom: 30px;
}

.containerSub {
  padding: 20px;
  background-color: #f1f1f1;
}

input[type=text],
input[type=submit] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input[type=checkbox] {
  margin-top: 16px;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  border: none;
}

input[type=submit]:hover {
  opacity: 0.8;
}

<form action="Subsc.php" method="post">
  <div class="containerSub">
    <h2>Subscribe to our Newsletter</h2>
    <p>If you liked this article consider subscribing to our Newsletter to receive our recent articles directly from your email</p>
  </div>

  <div class="containerSub" style="background-color:white">
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="Email address" name="email" required>
    <label>
            <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
         </label>
  </div>

  <div class="containerSub">
    <input type="submit" value="Subscribe">
  </div>
</form>

Output

How to check multiple chekbox from database value

I have this code to showing value from database as well as checking the checkbox that have the value :

<?php
    $result = mysqli_query($kon,"SELECT jenis FROM pasien WHERE nopemeriksaan = $nopemeriksaan"); 
    while($row = mysqli_fetch_array($result)) {
        $jenis = explode(",", $row['jenis']);
        print_r($jenis);
?>    
    <input type="checkbox" id="checkup" name="jenis[]" value="checkup" <?php if(in_array("checkup",$jenis)) echo 'checked="checked"'; ?>>
    <label> Check-Up</label><br>
    <input type="checkbox" id="vaksinasi" name="jenis[]" value="vaksinasi" <?php if(in_array("vaksinasi",$jenis)) echo 'checked="checked"'; ?>>
    <label> Vaksinasi</label><br>
    <input type="checkbox" id="usg" name="jenis[]" value="usg" <?php if(in_array("usg",$jenis)) echo 'checked="checked"'; ?>>
    <label"> USG </label><br>
    <input type="checkbox" id="xray" name="jenis[]" value="xray" <?php if(in_array("xray",$jenis)) echo 'checked="checked"'; ?>>
    <label> X-Ray </label><br>
    <input type="checkbox" id="sterilisasi" name="jenis[]" value="sterilisasi" <?php if(in_array("sterilisasi",$jenis)) echo 'checked="checked"'; ?>>
    <label> Sterilisasi</label><br>
    <input type="checkbox" id="operasi" name="jenis[]" value="operasi" <?php if(in_array("operasi",$jenis)) echo 'checked="checked"'; ?>>
    <label> Tindakan Operasi</label><br>
    <input type="checkbox" id="cekdarah" name="jenis[]" value="cekdarah" <?php if(in_array("cekdarah",$jenis)) echo 'checked="checked"'; ?>>
    <label> Cek Darah</label><br>
    <input type="checkbox" id="lainnya" name="jenis[]" value="lainnya" <?php if(in_array("lainnya",$jenis)) echo 'checked="checked"'; ?>>
    <label> Lainnya</label><br>
    
<?php
    }
?>

But however, it always just checking one value even when the array itself has 2 value. Is there anything I write wrong or anything I miss? Thank You very much for your help.

jqWidget - disable checkbox based on data

I'm using for my project the plugin jqWidget and for my table, I set "checkbox" as a "selection mode".

Now what I need is when the table will load, to disable/hide the checkbox for some rows based on the data values in each one, for exemple, if a value called "disableCheckbox" is "true", the checkbox will not be showed, and if it's "false", the checkbox will be enabled.

Any help is greatly appreciated.

How to work with MultipleCheckBox with Django?

good afternoon, I'm new with django and I'm trying to make an application that registers the attendance of entrepreneurs (I'm currently working with this). There are some services that I would like to select, sometimes the same person requires more than one service per appointment. However, part of the application uses the Models and part uses the Forms, I'd like to keep the two ones separate to keep the code organized, but I have no idea how to do it, I even created a separate class just for the tuple that holds the values, but no I managed to implement, can anyone help me? Here are the codes:

models.py

    from django.db import models
    from django_cpf_cnpj.fields import CPFField, CNPJField    
    
    class CadastroEmpreendedor(models.Model):
    
        ABERTURA = 'ABERTURA MEI'
        ALTERACAO = 'ALTERAÇÃO CADASTRAL'
        INFO = 'INFORMAÇÕES'
        DAS = 'EMISSÃO DAS'
        PARC = 'PARCELAMENTO'
        EMISSAO_PARC = 'EMISSÃO DE PARCELA'
        CODIGO = 'CÓDIGO DE ACESSO'
        REGULARIZE = 'REGULARIZE'
        BAIXA = 'BAIXA MEI'
        CANCELADO = 'REGISTRO BAIXADO'
        
        descricao_atendimento = (
            (ABERTURA, 'FORMALIZAÇÃO'),
            (ALTERACAO, 'ALTERAÇÃO CADASTRAL'),
            (INFO, 'INFORMAÇÕES'),
            (DAS, 'EMISSÃO DAS'),
            (PARC, 'PARCELAMENTO'),
            (EMISSAO_PARC, 'EMISSÃO DE PARCELA'),
            (CODIGO, 'CÓDIGO DE ACESSO'),
            (REGULARIZE, 'REGULARIZE'),
            (BAIXA, 'BAIXA MEI'),
            (CANCELADO, 'REGISTRO BAIXADO'),
        )
    
        cnpj = CNPJField('CNPJ')
        cpf = CPFField('CPF')
        nome = models.CharField('Nome', max_length=120)
        nascimento = models.DateField()
        email = models.EmailField('Email', max_length=100)
        telefone_principal = models.CharField(max_length=11)
        telefone_alternativo = models.CharField(max_length=11, blank=True)
        descricao_atendimento
       
    
        def __str__(self) -> str:
            return self.nome
    
    class DescricaoAtendimento(models.Model):
     
        descricao = models.ForeignKey(CadastroEmpreendedor, on_delete=models.CASCADE)

forms.py

    from django import forms
    from .models import DescricaoAtendimento
    
    class EmpreendedorForm(forms.ModelForm):
        class Meta:
            model = DescricaoAtendimento
            fields = ['descricao']
            widgets = {'descricao': forms.CheckboxSelectMultiple(),}

views.py

    from django.shortcuts import render
    from django.contrib import messages
    
    from .forms import EmpreendedorForm
    
    def cadastro_empreendedor(request):
        if str(request.method) == 'POST':
            form = EmpreendedorForm(request.POST, request.FILES)
            
            if form.is_valid():   
                form.save()
                messages.success(request, 'Produto salvo com sucesso!')
                form = EmpreendedorForm()
            else:
                messages.success(request, 'Erro ao salvar produto!')
        else:
            form = EmpreendedorForm()
        context = {
            'form': form
        }

        return render(request, 'empreendedor.html', context)

If you have any tips, I really appreciate it, I started with django almost a month ago, so there's a long way to go.

P.s: I integrated with PostgreSQL and in the django administration part I can save all the fields in the DB, but I can't implement that part of the checkbox.

At this moment, I get the error:

It is impossible to add a non-nullable field 'descricao' to descricaoatendimento without specifying a default. This is because the database needs something to populate existing rows.
Please select a fix:
 1) Provide a one-off default now (will be set on all existing rows with a null value for this column)
 2) Quit and manually define a default value in models.py.

In the template, I gonna work with bootstrap4 to create the forms. But I'd like to resolve this before. I'm stil learning English, so sorry some mistake.

How to remove inner HTML content onchange

I created a form where a user selects options from a checkbox list. So when a user selects an option in the checkbox, I use a function to show the value of the input field using onchange within inner HTML. My question is, how do we remove that same inner HTML content if the user un-selects those options? So when the user toggles back and forth, it either appears or when un-selected, the value gets removed. Thanks

function functionOne() {
  var x = document.getElementById("wheels").value;
  document.getElementById("demo").innerHTML = x;

}

<input type="checkbox" id="wheels" onchange="functionOne()" value="feature 1">

<div id="demo"></div>

I wish to add members to a project using checkboxes (Firebase React)

For a school project, I wish to be able to add members to a project. By clicking on their checkboxes on the page and creating the project with the selected checkboxes on, it would take the information of the members and insert them as an object in a table known as members :

tree:

Collection(membres)/user.uid/projects/projectID/membres[{memberID, member.name, member.email}]

Here's my full component to creating a project:

import { useState, useContext, useEffect } from "react";
import { onSnapshot, collection, doc, addDoc, setDoc, arrayUnion } from 'firebase/firestore';
import { db } from '../../config/firebase';
import { authContexte } from "../../Contexte/authContexte";
import Spinner from "../Spinner/Spinner";
import { useNavigate } from 'react-router-dom';

const CreerProjets = () => {
    const navigate = useNavigate();
    const ctx = useContext(authContexte);
    const [contact, setContact] = useState([]);
    const [client, setClient] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [newProjet, setNewProjet] = useState({
        description: '',
        nom: '',
        color: '#000000',
        membres: [],
        client: {}
    });
    const [selected, setSelected] = useState([]);

    //Pour recevoir la date actuel (jj/mm/aaaa)
    const current = new Date();
    const showTime = `${current.getDate()}/${current.getMonth() + 1}/${current.getFullYear()}`;

    // Pour reçevoir l'information des membres
    useEffect(() => {
        const unsub = onSnapshot(doc(db, 'membres', ctx.user.uid), (snapshot) => {
            // console.log(snapshot.data());
            setContact({
                ...snapshot.data(),
                id: snapshot.id
            })
            setIsLoading(false);
        });
        return unsub;
    }, []);

    // Pour reçevoir l'information des clients
    useEffect(() => {
        const unsub = onSnapshot(collection(db, 'clients'), (snapshot) => {
            setClient(snapshot.docs.map(doc => {
                return {
                    ...doc.data(),
                    id: doc.id
                };
            }));
        });
        return unsub;
    }, []);

    const updateProjet = (texte, prop) => {
        setNewProjet(current => {
            return {
                ...current,
                [prop]: texte
            };
        });
    };

    const SubmitForm = async (e) => {
        e.preventDefault();

      **  //ERROR IS HERE, THIS IS WHAT I'VE TRIED SO FAR AND I CANNOT GET ANYTHING ELSE BUT THE ID OF THE MEMBER**
        selected.map(id=>{
            return {
                id: id,
                nom: //Name of member with id here
            };
        });
        console.log(selected)


        const projetRef = collection(db, "membres", ctx.user.uid, "projets");

       const resp = await addDoc(projetRef, {
            nom: newProjet.nom,
            description: newProjet.description,
            color: newProjet.color,
            date: "Créé le "+showTime,
            membres: selected,
            clients: newProjet.client
        }, { merge: true });

        console.log(resp.id) // id du projet qui se crée
        console.log(resp)

        navigate('/projets');
    };

    const CheckMembres = async (e) => {
        const { checked, value } = e.currentTarget;
        setSelected(prev => checked ? [...prev, value] : prev.filter(val => val !== value));

    };



    return (
        <section>
            {isLoading ? <Spinner /> : (
                <form style= noValidate onSubmit={(e) => SubmitForm(e)}>
                    <div className="">
                        {/* Couleur du Projet */}
                        <div className="input-group mb-3">
                            <span className="input-group-text" id="inputGroup-sizing-default">Couleur du projet</span>
                            <input type="color" onChange={(e) => updateProjet(e.target.value, 'color')} className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={newProjet.color} />
                        </div>

                        {/* Titre du Projet */}
                        <div className="input-group mb-3">
                            <span className="input-group-text" id="inputGroup-sizing-default">Nom du Projet</span>
                            <input type="text" onChange={(e) => updateProjet(e.target.value, 'nom')} className="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value={newProjet.nom} />
                        </div>

                        {/* Description du Projet */}
                        <div className="mb-3">
                            <label htmlFor="exampleFormControlTextarea1" className="form-label">Description du Projet</label>
                            <textarea onChange={(e) => updateProjet(e.target.value, 'description')} className="form-control" id="exampleFormControlTextarea1" rows="3" value={newProjet.description}></textarea>
                        </div>
                    </div>

                    <div className="formDroit">

                        {/* Pour les membres */}

                        <div className="checkboxMembres">
                        <p>Contacts:</p>
                       {contact.contacts.map((membre)=>(
                        <div className="form-check form-switch" key={membre.nom + membre.email}>
                            <input className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onChange={(e)=>CheckMembres(e)} value={membre.id} checked={selected.some(val => val === membre.id)}/>
                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{membre.nom}</label>
                        </div>  
                       ))}
                    </div>

                        {/* Pour les clients */}

                        {/* <div className="selectClient">
                        <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Ajouter un Client</label>
                        <select className="form-select form-select-sm" aria-label=".form-select-sm example">
                            <option defaultValue>Pas de Client</option>
                            <option value="1">Client1</option>
                            <option value="1">Client2</option>
                            <option value="1">Client3</option>
                        </select>
                    </div> */}

                    </div>
                    <button className="btn btn-primary btnProjet" type="submit">Créer votre projet!</button>
                </form>)}
        </section>
    );
};
export default CreerProjets;

Checkboxes_detection with python_boxdetect package

I am trying to detect checkboxes using the boxdetect package (python), the script from (https://pypi.org/project/boxdetect/) works very well for unfilled document (i.e. it detects all unticked checkboxes from an empty form, howevere when I am trying to apply this script on a filled form (same document but contains ticked/non ticked checkboxes) it doesnot reqognize all checkboxed.(the size of the emapty form image= the size of the filled form image) does anybody have an idea/or other module suggestion to detect checkboxes with python #I used following script: (two output images are attached)

    file_name = "checked_new.png"

    cfg = config.PipelinesConfig()

    cfg.width_range = (10,60)
    cfg.height_range = (10,55)

    cfg.scaling_factors = [1.3]

    cfg.wh_ratio_range = (0.3, 2)

) cfg.group_size_range = (1, 1)

    cfg.dilation_iterations = 0

    from boxdetect.pipelines import get_boxes

    rects, grouping_rects, image, output_image = get_boxes(file_name, cfg=cfg, plot=False)

Two of more checkboxes stays in one line and the rest goes to next line [closed]

I don't really know why it behaves like that. I tried to prevent checkbox label from wrapping to opposite side of page using display: inline-block; and it works but for some reason two checkboxes stays in first line and the rest goes down.

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Tahoma;
  background-color: #1d3557;
  font-size: 16px;
  color: white;
}
h1, p {
  margin: 1em auto;
  text-align: center;
}
form {
  width: 60vw;
  min-width: 300px;
  max-width: 500px;
  margin: 0 auto;
  /* background-color: #F7DBA7; */
}
label {
  display: block;
}
.in-line {
  display: inline-block;
  margin: 0 5px 0 0;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea, select {
  width: 100%;
  margin: 5px 0 10px 0;
  min-height: 2em;
  background-color: #457b9d;
  border: 1px solid #1d3557;
  color: white;
  
}
fieldset {
  border: 0;
  border-bottom: 2px solid #e63946;
  margin: auto;
}
.submit {
  display: block;
  width: 60%;
  height: 2em;
  margin: 1em auto;
  background-color: #457b9d;
  border-color: #1d3557;
  font-size: 1.1rem;
  color: white;
  font-family: tahoma;
}
::placeholder {
  color: white;
}
fieldset:first-of-type {
  border-top: 2px solid #e63946
}
.text-size {
  font-size: 0.9em;
}
input[type="checkbox"] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Customer Survey</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="title">Byens Pizza House Customer Survey</h1>
  <p id="description">We are happy that you chose us! Please answer these short questions and help us improve for you!</p>
<!-- SURVEY -->
  <form id="survey-form" method="post" action="">
<!-- NAME/EMAIL/GUESTS -->
    <fieldset>
      <label id="name-label" for="name-label">Your name: <input id="name" name="name-label" type="text" placeholder="James Smith" required></label>
      <label id="email-label" for="email-label">Email: <input id="email" name="email-label" type="email" placeholder="example@domain.com" required></label>
      <label id="number-label" for="number-label">Number of guests: <input id="number" name="number-label" type="number" min="1" max="20" placeholder="2" required></label>
    </fieldset>
<!-- TYPE OF FOOD -->
    <fieldset>
      Type of food you ordered:
      <label for="type-of-food" class="text-size">
        <label class="in-line" for="pizza"><input id="pizza" type="checkbox" name="type-of-food" value="Pizza" checked>Pizza</label>
        <label class="in-line" for="burgers"><input id="burgers" type="checkbox" name="type-of-food" value="Burgers">Burgers</label>
        <label class="in-line" for="pasta"><input id="pasta" type="checkbox" name="type-of-food" value="Pasta">Pasta
        <label class="in-line" for="seafood"><input id="seafood" type="checkbox" name="type-of-food" value="Seafood">Seafood</label>
        <label class="in-line" for="sandwiches"><input id="sandwiches" type="checkbox" name="type-of-food" value="Sandwiches">Sandwiches</label>
        <label class="in-line" for="salads"><input id="salads" type="checkbox" name="type-of-food" value="Salads">Salads</label>
        <label class="in-line" for="desserts"><input id="desserts" type="checkbox" name="type-of-food" value="Desserts">Desserts</label>
        <label class="in-line" for="beverage"><input id="beverage" type="checkbox" name="type-of-food" value="Beverage">Beverage</label>
      </label>
    </fieldset>
<!-- DELI/PICKUP/INSIDE -->
    <fieldset>
      Delivery method:
      <label for="delivery" class="text-size"><input id="delivery" type="radio" name="delivery-method" value="delivery" checked> Delivery</label>
      <label for="pickup" class="text-size"><input id="pickup" type="radio" name="delivery-method" value="pickup"> Pickup</label>
      <label for="inside" class="text-size"><input id="inside" type="radio" name="delivery-method" value="inside"> Inside</label>
    </fieldset>
<!-- COMMENT/REFERRER/RATE -->
    <fieldset>
      <label for="comment">Any thoughts?: <textarea id="comment" name="comment" rows="3" cols="30" placeholder="I liked spicy menu and choice of beverage..."></textarea></label>
      <label for="referrer">How did you hear about us? 
        <select id="referrer" name="referrer">
          <option value="">(select one)</option>
          <option value="1">Social Media</option>
          <option value="2">From a friend</option>
          <option value="3">Leaflet</option>
          <option value="4">Other</option>
        </select>
      </label>
      <label for="satisfaction">Are you satisfied with our service?
        <select id="dropdown" name="satisfaction">
          <option value="">(select one)</option>
          <option value="1">I am very satisfied!</option>
          <option value="2">Service was ok.</option>
          <option value="3">Not satisfied nor dissatisfied.</option>
          <option value="4">I am dissatisfied.</option>
          <option value="5">Sevice was terrible.</option>
        </select>
      </label>
    </fieldset>
    <label><input id="submit" type="submit" value="Submit" class="submit"></label>
  </form>
</body>
</html>

Im working on my first learning project and don't know any possible solution for this.

how to do a checklist with a variable array?

I want to build a self updating filter with checkboxes:

//extract tags to new array
const tags = [...new Set(shooting.map(({ tag }) => tag).flat(1))];
//  result: tags = ['wedding', 'couple', 'NSWF']  // <- here undefinded count of tags !

function Test() {
  return (
      <FilterCheckboxBar
       filteredTags={tags} />
  );}
export default Test;

FilterCheckboxBar:

interface Filter {
  filteredTags: any;
}

function FilterCheckboxBar(props: Filter) {


  const [values, setValues] = useState<any>([]);   // <- I guess here is something missing

  //  ----- Handle Checkbox-----                   // <- or in this one is an error
  const handleChange = (e: any) => {
    setValues((prevState: any) => {
      const [name] = e.target;
      return {
        ...prevState,
        [name]: !prevState[name],
      };
    });
  };

  return (
    <div className="filterbar">

  {/* this list my checkboxes  */}
      {props.filteredTags.map((list: any, i: any) => (
        <label key={i} htmlFor={list}>
          <input
            className="checkbox"
            type="checkbox"
            name={list}
            id={list}
            onChange={(e) =>handleChange(e)}
            checked={values}
          />
          {list}
        </label>
      ))}
    </div>
  );
}

export default FilterCheckboxBar;

by clicking on one checkbox, my page gets white and in the console this massage comes: Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

I guess I have to do something with useState but do not know,how to build this.

Allow only one checkbox to be checked on b-table bootstrap vue

I have a column of checkboxes on a b-table but I only want the user to be able to select one. Selecting another should uncheck the first option.

I tried to set selected = [] and refresh the table upon selection of a second checkbox but while the selected object ends up with the correct row data, the checkbox still appears on the table.

I also tried to call this.$refs.myTable.clearSelected() but that did not seem to have any effect beyond setting my v-model to null.

Here is the table code:

          <b-table
          no-provider-filtering
          ref="groupTable"
          show-empty
          stacked="md"
          :items="ParamProvider"
          :fields="fields"
          striped
          outlined
          hover
          class="bg-light"
          :current-page="current_page"
          :per-page="per_page"
          :filter="filter"
          :filter-included-fields="filterOn"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          :sort-direction="sortDirection"
          @filtered="onFiltered"
        >
          <template v-slot:cell(selected)="row">
            <b-form-group>
              <input type="checkbox" @click.stop="addToSelected(row.item, row.index)"/>
            </b-form-group>
          </template>

          <template v-slot:cell(actions)="data">
            <b-button size="sm" variant="danger" b-tooltip title="Delete"
                      @click.stop="removeItem(data.item, data.index)"><i
              class="fa fa-trash"></i></b-button>
          </template>

        </b-table>

how to generate checkbox from given array i PHP

I have given an array

$languages = ["C", "C++", "Java", "C#", "HTML", "CSS", "XML", "PHP", "JavaScript"];

and I have to generate checkboxes from them

and not like that

<input type="checkbox" name="languages []" value="C"/>C
<input type="checkbox" name="languages []" value="C++"/>C++
....

Is there a chance anyone could help me solving this problem, because I stucked myslelf, and I can't figure this out.

I tired something like that but it turns out it doesn't work proprly.

<?php
$jezyki = ["C", "C++", "Java", "C#", "HTML", "CSS", "XML", "PHP", "JavaScript"];
foreach($jezyki as $key=>$value){
    echo '<input type="checkbox" name="' . 'jezyki[]' . '" />'. $value;
}
?>

Want to make checkboxes in the dropdown list?

Currently, I have dropdown list and 1-25 values in dropdown. Current one is I want to make checkbox for those values instead of choosing multiple. Is there anyway to add checkbox for those?

    var mtf = document.getElementById('affectedwaferid').selectedOptions;
  var affectedwf = Array.from(mtf).map(({ value }) => value);
  //alert(affectedwf);
  document.getElementById("selected-result").innerHTML = affectedwf; 

Above is JavaScript.

<div id="afwid">
  <label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
       <div class="col-sm-4">
        <p class="form-control-static" style="margin-top: -6px;">
            
            <select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
            <option value="" selected > Select Quantity</option>
            <?php  
            //echo $cbo_oorigsite;
            ?>
            <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>

          </select>
        </p>
      </div>

Passing values from a constant to the e.target.value

I am working on building out a radio component and when checked I want the values from the radio button to pass when set onBlur. I am trying to pass a function to the onBlur but I am not seeing the values on my Form Submit action.

const [isChecked, setIsChecked] = React.useState<boolean>(defaultValue);
    const onValue = React.useMemo(() => {
        if (!isChecked) return [`${label}, ${description}`];
    }, [onChange]);
    const checkedValue = React.useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) =>
            onChange?.(onValue, e.target.value),
        [onChange]
    );

    
    return (
        <div className="space-y-5">
            <div className="relative flex items-start">
                <div key={id} className="flex h-5 items-center">
                    <input
                        id={`${label}-id`}
                        name={label}
                        type="radio"
                        className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                        
                        onBlur={checkedValue)}
                        onChange={() => setIsChecked(!isChecked)}
                    />
                </div>
                <div className="ml-3 text-sm">
                    <label
                        htmlFor={`${label}-id`}
                        className="block font-medium text-gray-700"
                    >
                        {label}
                    </label>
                    <p id={`${label}-description`} className="text-gray-500">
                        {description}
                    </p>
                </div>
            </div>
        </div>
    );
};

Checkbox array (square brackets) - all have the same name and 'checked' is not working

I have a number of checkboxes that return an array of data to PHP. They are all named 'Plans[]' but with different IDs.

I have a CSS checkbox styler that replaces the usual HTML checkbox with something more fancy...

When the page is displayed, there is one (or several) that are 'checked', but they don't display as checked (I think one does but that is hidden usually).

I am assuming that the problem is caused by them all having the same name and so somehow they are the checked attribute is not getting acted on for all of them for this reason. I have tried wrapping each of them in their own forms (as I saw this suggested elsewhere) but to no avail.

Here's an example of what it looks like:

<style type="text/css">
.checkOpt input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: -.3em;
  right: 5%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 20%;
  border: 1px;
  border-color: #1e62d0;
  border-style: dashed;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  font-weight: 900;
  color: blue;
  margin-top: -11px;
  margin-left: -3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  content: "\2714";
  position: absolute;
  display: none;
}


/* Style the indicator (dot/circle) */
.checkOpt .checkmark:after {
    top: 8px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    
    /* background: white; */
    text-shadow: -1px -1px 0 #7f7f7f, 1px -1px 0 #7f7f7f, -1px 1px 0 #7f7f7f, 1px 1px 0 #7f7f7f;
}

/* Show the indicator (dot/circle) when checked */

.checkOpt input:checked~.checkmark:after {
  display: block;
}

/* On mouse-over, add a grey background color */
.checkOpt:hover input ~ .checkmark {
  background-color: #97c4fe;
}
/* When the radio button is checked, add a blue background */
.checkOpt input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkOpt input:disabled ~ .checkmark {
  background-color:#b0c7df; pointer:default;
}

.test {
  position: relative;
  height:60px;
}
</style>

<div class="test">
  <div class="checkOpt" style="top:20px;">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line - OFNL" id="12" value="0.00" checked="checked" >              
                  <span class="checkmark"></span>
          </label>
  </div>
</div>
<div  class="test">
  <div class="checkOpt" >
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Paper Bill" id="35" value="2.00" >              
                  <span class="checkmark"></span>
           </label>
  
  </div>
</div>
<div  class="test">
  <div class="checkOpt">
    <label class="labelopt">
          <input type="checkbox" name="plans[]" class="checkb " title="Transfer existing line " id="12" value="0.00" checked="checked" disabled="disabled">              
                  <span class="checkmark"></span>
          </label>
  
  </div>
</div>

...only one of these (the first) is showing as checked - the rest are not. Does anyone have any ideas what I might do to get round this (without coding changes to the subsequent data collection if possible!)

tried everything I can think of and would welcome any suggestions....

Vanilla JS Dropdown Menu Closing on Checkbox Selection [duplicate]

I'm trying to implement a Vanilla JS Dropdown menu with checkbox options. I'm able to create the dropdown and click on the labels for the options while keeping the menu open. To close the menu, I can perform a blur event or select the dropdown input again. However, when I click on the actual <input type="checkbox"> within the dropdown menu, the menu closes immediately. I would like the menu to remain open until the user closes it on blur. A clue may be coming from an error message I'm getting in the console saying that the "currentTarget is undefined" when clicking on one of these checkboxes. Any help is greatly appreciated.

Codepen: https://codepen.io/jon424/pen/MWXpPmZ?editors=1111

HTML

         <div class="center">
          <form tabindex="0" onclick="showCheckboxes()" onblur="hideCheckboxes()">
           <div class="multiselect">
            <div class="selectBox">
             <select>
              <option>Select an Option</option>
             </select>
             <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
             <label><input type="checkbox" class="checkbox-option" id="1"/>One</label>
             <label><input type="checkbox" class="checkbox-option" id="2"/>Two</label>
             <label><input type="checkbox" class="checkbox-option" id="3"/>Three</label>
            </div>
           </div>
          </form>
          </div>

CSS

.multiselect {
  margin: auto;
  width: 200px;
}
.selectBox {
  position: relative;
}
.selectBox select {
  width: 100%;
  font-weight: bold;
}
.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#checkboxes {
  display: none;
  border: 1px #dadada solid;
}
#checkboxes label {
  display: block;
}
#checkboxes label:hover {
  background-color: #1e90ff;
}

JS

//multi-select dropdown menu
let expanded = false;
function showCheckboxes(e) {
  let checkboxes = document.getElementById("checkboxes");

  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

function hideCheckboxes(e) {
  let checkboxes = document.getElementById("checkboxes");
  let label = document.getElementsByTagName("label");
  let input = document.querySelector("label > input");
  let multiSelect = document.getElementsByClassName("multiselect");
  if (
    !e.currentTarget.contains(multiSelect) ||
    !e.currentTarget.contains(checkboxes)
  ) {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

tkinter long list of checkbox to display in many columns [duplicate]

I did this short code to display à long (200+) list of variable to make a selection via checkbox.

def gui_selection(list_depart):

    import tkinter
    root = tkinter.Tk()
    selection = []

    nb = 1
    r = 0
    c = 0
    for x in range(len(list_depart)):
        # this part is for grid positionning
        if nb > 20:
            r = 0
            c = c + 1
            nb = 1
        nb = nb + 1
        # end of grid positionning 

        l = tkinter.Checkbutton(root, text=list_depart[x], variable=list_depart[x],
                                command=lambda x=list_depart[x]: selection.append(x)).grid(row=r, column=c)
        l.pack(anchor='w')
    tkinter.Button(root, text="Ok", command=lambda: [print(selection), root.destroy()]).pack()
    root.mainloop()

    return selection

I try to limit to 20 the number of row and start a new columns each time this value is reach. It was working great until I try to add the grid() like an an exemple I follow using grid.

error: File "E:/Python/Projet/AI_hydro/modelisation/load_data.py", line 145, in gui_selection l.pack(anchor='w') AttributeError: 'NoneType' object has no attribute 'pack'

This is my first interface user, thank for your help

How to select only one checkbox instead of being able to select more than one? (react)

I would like to only be able to select a single checkbox and not all or more than one. I would like to use checkbox instead of radio because I can disable it without having to mark another radio

     <C.SingleCard>
            <h2>Pizza</h2>
            <div>
                <hr />
                <h3>Flavors</h3>
                <hr />
            </div>
            <div>
                <h4>Pepperoni</h4>
                <input type="checkbox" name='flavor' />
            </div>
            <div>
                <h4>Chicken</h4>
                <input type="checkbox"  name='flavor' />
            </div>
            <div>
                <h4>Bacon</h4>
                <input type="checkbox"  name='flavor'  />
            </div>
            <div>
                <button>Add</button>
            </div>
        </C.SingleCard>

ngFor checkbox generation binding same value for all checkboxes

My goal is to save 1 for the checkbox which is selected and 0 for all that aren't.

With the code I have, it will always save 1 (whether selected or not) for all checkboxes and this is not the desired outcome

I'm using NG-ZORRO for the checkbox but I get the same result with a regular checkbox type input

<div *ngFor="let ims of mIntake.TblIntakeStaff" style="display: flex; margin-bottom: 4px">
          <div style="flex-grow: 1; flex-basis: 0"> </div>
            <div style="flex-grow: 1; flex-basis: 0">   
                <label nz-checkbox            
                    [ngModel]="ims.Percentage * 0"
                    (ngModelChange)="ims.Percentage = 1" >              
                </label>                                          
            </div>
          </div>

How to have multi selection and checkbox work together in telerik WPF

I have check boxs inside my radchombobox and if I select multiple names it shows in the text field but noting happens till I click the check box then the radcombobox closes after one check. How to I combine both actions so if I select the names or check the check boxes it work. Also how do I get the combobox not to close after I check one item. New to telerik WPF thnka you

<Grid>
 <telerik:RadComboBox x:Name="radComboBox"
                             VerticalAlignment="Center"
                             Margin="0 50 0 0"
                             Grid.Column="1"
                             Grid.Row="1"
                             ItemsSource="{Binding Items}" 
                             AllowMultipleSelection="True">
                             
           <telerik:RadComboBox.ItemContainerStyle>
            <Style TargetType="{x:Type telerik:RadComboBox}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <StackPlanel Orientation "Horizontal">
                                <CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" 
                                          VerticalAlignment="Center"
                                          Width="5"/>
                                <TextBlock Text="{Binding Name}"/>
                            <StackPlanel>
                        <ControlTemplate>
                    <Setter.Value>
                <Setter>
            <Style>
                
           
           <telerik:RadComboBox.ItemContainerStyle>
           
        </telerik:RadComboBox>
<Grid>

"Name" is a string and "Items" is an ObservableCollection

How to add two actions to a script / work simultaneously

I have tried time and time again to utilize this same script & formatting to try to also get the "lost" checkbox to move to the "lost" tab (on the same script) and I've been at a loss. Any help on how to get two identical actions/scripts to work simultaneously? My current script allows the checkbox for "sold" to go in a "sold" tab, and i need the same for "lost" if that makes sense.

function onEdit(e) {
  let sheet;
  if (e.range.columnStart !== 9
    || e.range.rowStart === 2
    || !(sheet = e.range.getSheet()).getName().match(/^(Cynthia|Jenni|Kelsi|Monte)$/i)) {
    return;
  };
  const targetSheet = SpreadsheetApp.getActive().getSheetByName('Sold');
  const targetRange = targetSheet.getRange(targetSheet.getLastRow() + 1, 1);
  sheet.getRange(e.range.rowStart, 1, 1, 8).moveTo(targetRange);
  sheet.deleteRow(e.range.rowStart);
}

Spring Thymeleaf set checkbox to on update value with related table

Im trying to setup an update/edit page, for an Employee entity that has a oneToMany relation with EmployeeProject entity. Then Project also has a oneToMany relation to EmployeeProject. Saving an employee works fine, you enter a name and contract start/end dates then there is a dynamic list of projects where you use a checkbox to choose the project and add employeeProjectMonths. My problem is in update_employee, when I set the th:field to set the checkbox to show which projects are already set to that employee it uses the EmployeeProject id, not the project id in EmployeeProject, which shows incorrect projects. Im not sure how to do it, ive tried th:field="${employee.employeeProjects.project.id}", also without .id. but I'm not sure how to proceed. So how do I set the th:field="${employee.employeeProjects}" so it chooses the project_id column and not the EmployeeProjects id column?

Heres my entities without constructors, getters and setters.

@Entity
@Table(name = "employees")
public class Employee {

    @Id
    @Column(name = "employee_id")
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String name;

    @JsonFormat(pattern = "yyyy-MM-dd", shape = JsonFormat.Shape.STRING)
    @Column(name = "contracted_from")
    private String contractedFrom;

    @JsonFormat(pattern = "yyyy-MM-dd", shape = JsonFormat.Shape.STRING)
    @Column(name = "contracted_to")
    private String contractedTo;

    @OneToMany(mappedBy = "employee", cascade = CascadeType.ALL)
    private Set<EmployeeProject> employeeProjects = new HashSet<>();

@Entity
@Table(name = "projects")
public class Project implements Serializable {
    @Id
    @Column(name = "project_id")
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private Long projectNumber;

    @Column(nullable = false, length = 45)
    private String name;


    @JsonFormat(pattern = "yyyy-MM-dd", shape = JsonFormat.Shape.STRING)
    @Column(name = "start_date", nullable = false)
    private String startDate;

    @JsonFormat(pattern = "yyyy-MM-dd", shape = JsonFormat.Shape.STRING)
    @Column(name = "end_date", nullable = false)
    private String endDate;

@Entity
@Table(name = "employee_projects")
public class EmployeeProject implements Serializable {

    @Id
    @Column(name = "employee_project_id")
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @JsonIgnore
    @ManyToOne
    @JoinColumn(name = "employee_id")
    private Employee employee;

    @ManyToOne
    @JoinColumn(name = "project_id")
    private Project project;

    @Column(name = "employee_booked_months")
    private double employeeBookedMonths;

Controller

@GetMapping("/showFormForEmployeeUpdate/{id}")
    public String showFormForUpdate(@PathVariable ( value = "id") long id, Model model) {
        Employee employee = employeeService.getEmployeeById(id);
        List<Project> projects = employeeService.getAllProjects();
        model.addAttribute("employee", employee);
        model.addAttribute("projects", projects);
        return "update_employee";
    }

html form

<form action="#" th:action="@{/ines/saveEmployee}" th:object="${employee}"
            method="POST">
            
            <!-- Add hidden form field to handle update -->
            <input type="hidden" th:field="*{id}" />

            <input type="text" th:field="*{name}"
                   placeholder="Employee Name" class="form-control mb-4 col-4">

            <input type="date" th:field="*{contractedFrom}"
                   placeholder="Contracted From" class="form-control mb-4 col-4">

            <input type="date" th:field="*{contractedTo}"
                   placeholder="Contracted To" class="form-control mb-4 col-4">
            <div th:each="project : ${projects}">
                <div class="form-group blu-margin">
                    <input type="checkbox" th:field="${employee.employeeProjects}" th:name="projectId" th:text="${project.name}" th:value="${project.id}">
                    <input type="text" th:name="employeeProjectMonths" th:value="${employeeProjectMonths}"
                           placeholder="Employee Project Months" class="form-control mb-4 col-4">
                </div>
            </div>
            <button type="submit" class="btn btn-info col-2">Save Employee</button>
        </form>

Thanks in advance

Implement a Checkbox tree without libraries

You need to implement the Checkbox tree using Vue without libraries. The Checkbox tree consists of several List (parents) and Item (children). At the moment, it turned out to implement a custom input and closing the checkbox tree section, but it was not possible to implement the allocation of children by clicking on the parent in the checkbox and changing the checkmark (content: "\2713") to a point (content: "\2022") at the parent if the child's checkbox is selected.

<template>
  <div class="tasks-card">
    <div id="multiple-checkboxes" class="tasks-card__multiple-checkboxes">
      <div class="checkboxes">
        <p class="swipe-arrow"><i class="arrow-right" @click="items_1_visible=!items_1_visible" onclick="this.className = (this.className == 'arrow-right' ? 'arrow-down' : 'arrow-right')"></i></p>
        <div class="parent-check">
          <input type="checkbox" class="parent-check-list" id="list_1"><label for="list_1">List 1</label>
          <div class="child-check-items"
          v-show="items_1_visible"
          >
            <div class="child-check">
              <input type="checkbox" id="Item_1" class="item-check" ><label for="Item_1">Item 1</label>
              <input type="number" class="item-number" onfocus="this.value=''" v-model.lazy = number1>
              <input type="color" class="item-color" v-model.lazy = color1>
            </div>
            <div class="child-check">
              <input type="checkbox" id="Item_2" class="item-check"><label for="Item_2">Item 2</label>
              <input type="number" class="item-number" onfocus="this.value=''" v-model.lazy = number2>
              <input type="color" class="item-color" v-model.lazy = color2>
            </div>
          </div>
        </div>
        <p class="swipe-arrow"><i class="arrow-right" @click="items_2_visible=!items_2_visible" onclick="this.className = (this.className == 'arrow-right' ? 'arrow-down' : 'arrow-right')"></i></p>
    <div class="parent-check">
      <input type="checkbox" class="parent-check-list" id="list_2"><label for="list_2">List 2</label>
        <div class="child-check-items"
        v-show="items_2_visible"
        >
          <div class="child-check">
            <input type="checkbox" id="Item_2.1" class="item-check" ><label for="Item_2.1">Item 1</label>
            <input type="number" class="item-number" onfocus="this.value=''" value = "0">
            <input type="color" class="item-color">
          </div>
          <div class="child-check">
            <input type="checkbox" id="Item_2.2" class="item-check"><label for="Item_2.2">Item 2</label>
            <input type="number" class="item-number" onfocus="this.value=''" value = "0">
            <input type="color" class="item-color">
          </div>
          <div class="child-check">
            <input type="checkbox" id="Item_2.3" class="item-check"><label for="Item_2.3">Item 3</label>
            <input type="number" class="item-number" onfocus="this.value=''" value = "0">
            <input type="color" class="item-color">
          </div>
          <div class="child-check">
            <input type="checkbox" id="Item_2.4" class="item-check"><label for="Item_2.4">Item 4</label>
            <input type="number" class="item-number" onfocus="this.value=''" value = "0">
            <input type="color" class="item-color">
          </div>
        </div>
    </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TasksCard',
    data() {
      return {
        items_1_visible: true,
        items_2_visible: true,
      }
    },
    computed: {
      color1: {
        get () {
          return this.$store.state.item1.color
        },
        set (value) {
          this.$store.commit('updateColor1', value)
        }
      },
      number1: {
        get () {
          return this.$store.state.item1.number
        },
        set (value) {
          this.$store.commit('updateNumber1', value)
        }
      },
      color2: {
        get () {
          return this.$store.state.item2.color
        },
        set (value) {
          this.$store.commit('updateColor2', value)
        }
      },
      number2: {
        get () {
          return this.$store.state.item2.number
        },
        set (value) {
          this.$store.commit('updateNumber2', value)
        }
      },
    },
}
</script>

<style lang="scss">
.child-check{ 
  margin-bottom: 5px;
  display: flex;
  width: 450px;
}
.tasks-card{
  min-width: 300px;
  &__multiple-checkboxes{
    margin: 30px 0px 0px 20px;
  }
}
input[type=checkbox] {
  display: none;
}
.parent-check label:before {
  margin: 0px 5px 10px 25px;
}
.child-check label:before {
  margin: 0px 5px 10px 45px;
}
.parent-check label:before {
  border: 1px solid #000000;
  content: "\2713"; 
  color: #ffffff;
  text-align: center;
  line-height: 15px;
  font-size: 15px;
  width: 15px;
  height: auto;
}
input[type=checkbox]:checked + label:before {
  content: "\2713"; // "\2713" "\2022" 
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.872);
  font-size: 15px;
  color: #0f0f0f;
  text-align: center;
  line-height: 15px;
}
label{
  flex-wrap: nowrap;
  display: flex;
  width: 150px;
  line-height: 1;
  font-size: 14px;
}
input[type="color"] {
  border: none;
  width: 25px;
  height: 25px;
}
.item-color{
  display: flex;
  flex-direction: row;
  margin-left: auto;
}
.item-check{
  display: flex;
}
.item-number{
  display: flex;
  flex-direction: row;
}
input[type="number"] {
  border: none;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 1;
  font-size: 14px;
  margin: 4px 0px 0px 250px;
}
.arrow-right {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.arrow-down {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.swipe-arrow{
    position: absolute;
    margin: 0px 0px 0px 0px; 
}
.checkboxes{
  position: relative;
  margin: 0px 70px 0px 0px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

</style>

Cypress test to check all checkboxes except one

I am trying to create a Cypress test where it selects a list of checkboxes and clicks them individually and asserts if it it's checked and when it's not checked. The issues it the first checkbox in this list is a checkbox that selects all the other checkboxes and my assert breaks because the select all checkbox is always asserted to the opposite value compared to the other checkboxes for example the loop would click the first checkbox that would select all the checkboxes (including itself) and then the loop would continue down the list and click every individual checkbox and would deselect it so that means the select all checkbox is checked while the other checkboxes aren't. The other problem is that they all share the same class and I can't seem to use data-cy="" to select the individual checkboxes either, is there a way where I can make the cypress test to skip the first checkbox or maybe make the assertion skip the first one.

This is my test that I am using:

getCy('table')
  .find('.checkbox-base')
  .each($el => {
    cy.wrap($el)
      .click()
      .invoke('attr', 'aria-checked')
      .should('contain', true);
  })

And here is the component with the column of checkboxes:

     <Column
        header={<ToggleAllCell store={Store} />}
        width={60}
        data={data}
        cellClassName="wrap"
        cell={({ rowIndex }) => (
          <ToggleCell option={data[rowIndex]} store={Store} />
        )}
      />

Setting condition for vue bootstrap checkbox component prop

I am new to Vue and I have to fix the following issue for work. I have a Bootstrap Vue b-form-checkbox-group similar to the one bellow. The listofOption comes from backend and from legacy databses. Sometime the ColumnName is empty or null. Right now it shows null or a blank space, but I want it to print the text "_blank" if that is the case.

<b-form-checkbox-group id="flavors"
   v-model="status"
   :options="listofOption"
   :text-field="ColumnName"
   :value-field="ColumnName"
    name="flavors" class="ml-4" aria-label="Individual flavours" stacked>
</b-form-checkbox-group>

I have replaced the :text-field with the following line but can't make it work:

:text-field="[(ColumnName && ColumnName != null && ColumnName != '') ? ColumnName : '_blank']"

delete row when multiple checkboxes are selected, in flask generated website

I am trying to make a to-do list with sub-tasks which are generated by a form which ask the user for the task name and sub-task names. Then I displayed the sub-tasks with the help of jinja template, but I want to be able to delete the row of the table that is the task when all three checkboxes are selected

                <form action="/delete" method="post" id = "x">

                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name= 'sub_task1' value=  id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                      
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name='sub_task2' value=  id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                      
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name=sub_task3 value=  id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                      
                    </label>
                </form>

I do not want to create a submit button , so I thought of using get,ElementById function but as it is a jinja template knowing before hand what the id is not possible. Is there any way to implement it

I tried using wtforms but I reached a dead end there.

Duplicate Google Form Response Sheet to Allow Script

I am looking to duplicate my Google Form response sheet to a new sheet that will allow me to insert scripts. My issue is doing this dynamically. The duplicated sheet will be changing and I only want the new information from the Google Form response sheet to be added. Essentially I am looking to use checkboxes to show a completed status on my Google Form responses and move that data to a new sheet. The script I am using for the checkboxes works, but it won't allow me to do it for the original Google Form response sheet, so I need to create a duplicate. Duplicating the sheet with a formula works on the initial set, but once the duplicated form is modified it breaks it.
I am sure there is a simpler way to accomplish this. I am stuck. Any suggestions?

Adding a script to the original google form response sheet does not allow the script to run

Duplicating the google form response sheet allows the checkboxes to work and move the completed row to a new sheet, but any new responses from the google form are not added to the duplicated sheet.

Selecting multiple checkboxes in JS to find the correct expression to evaluate

I am making a basic kinematics calculator so I have 5 variables of which I just need three to solve the remaining 2. However, users can choose which they are solving. I am just beginning my JS journey again so I am not sure of either the correct syntax or logic to choose which equations I should be using.

Here is the user choices (as far as I can see these will select and work):

//Equation Variables
//Checkbox selection
const s = document.querySelector("#displacement");
const u = document.querySelector("#initial_velocity");
const v = document.querySelector("#final_velocity");
const a = document.querySelector("#acceleration");
const t = document.querySelector("#time");
//User input values
const sUser = document.getElementById("inputDistance").value;
const uUser = document.getElementById("inputVi").value;
const vUser = document.getElementById("inputVf").value;
const aUser = document.getElementById("inputAcceleration").value;
const tUser = document.getElementById("inputTime").value;

For the first equation I want to check if u, v, a and t are selected and then I will solve for s. In the second equation, I will see if v, a and t are chosen and then I will solve for s and u. And so on until all combinations are filled.

The HTML:

<div class="suvat-check">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="displacement" id="displacement">
                <label class="form-check-label" for="displacement">
                Displacement (s)
            </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="initial_velocity">
                <label class="form-check-label" for="initial_velocity">
                Initial Velocity (u)
            </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="final_velocity" id="final_velocity">
                <label class="form-check-label" for="final_velocity">
                Final Velocity (v)
            </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="acceleration" id="acceleration">
                <label class="form-check-label" for="acceleration">
                Acceleration (a)
            </label>
            </div>
            <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" value="time" id="time">
                <label class="form-check-label" for="time">
                Time (t)
            </label>
            </div>
        </div>

And each input box is on a separate card.

One of the inputs will look like this (they're all similar):

<label for="inputDistance">Displacement (s)</label>
                        <input type="number" name="inputDistance" id="inputDistance" class="reset_form checkVelocity" value="" min="0.01" step="0.01" autocomplete="off">
                        <label for="unitsDistance">Units</label>
                        <select name="unitsDistance" id="unitsDistance" style="width:60px;">
                    <option value="m" selected>m</option>
                    <option value="km">km</option>
                    <option value="yd">yd</option>
                    <option value="mi">miles</option>
                    <option value="ft">feet</option>
                </select>

The way I was thinking would be to use an if statement. But I am not completely sure how to do that properly yet with multiple checkboxes.

There is probably a good way to do this - which is why I am reaching out. Thanks.

Checking Measurement Data Error - 'If only Constants arrive'

Example:

If the Photovoltaik Number is constant over a certain period, there is something wrong, because Solar Power Irradation fluctuats alot. So One should want to recognize this bevarioul pattern to e.g. restart the system.

old_pv = []

while True:

    
    try:
        count = 1
        sunny_scraper.driver.current_url
        new_pv = sunny_scraper.scrape()
        old_pv.append(new_pv)
        count += 1
        if count in [19, 20]:
            if len(list(set(old_pv))) == 1:
                sunny_scraper.start_browser()
                sunny_scraper.accept_cookies()
                sunny_scraper.enter_email_password()
                new_pv = sunny_scraper.scrape()
                time.sleep(5)
                old_pv = []
                old_pv.append(new_pv)
        else:
            time.sleep(10)
    except:
        time.sleep(120)
        sunny_scraper.start_browser()
        sunny_scraper.accept_cookies()
        sunny_scraper.enter_email_password()
        sunny_scraper.scrape()
        time.sleep(10)

pv - Photovoltaic (solar power)

the pv value is scraped in high resolution (~ 10s), I work in Solar Industrie for Power Prediction using All Sky Imager. Sometimes the value freezes (reason unclear), so restarting the script is the current idea.

What other implementation options would be conceivable and useful? I would be happy for inspiration.

Save and remember Checkbox selections to state

Two things I'm trying to accomplish:

• Save user-selected checkboxes to state array for submission later in a multistep form, currently can do this with radio buttons (this includes an other box with a user entry)
• Remember a user's selections so upon clicking a "previous" (already built functionality) button their previous selections remain.

'use strict';

import React, { Component } from 'react';
import Form from 'react-bootstrap/Form';
import FormCheck from 'react-bootstrap/FormCheck';
import Feedback from 'react-bootstrap/Feedback';

export default class Step3 extends Component {
  constructor(props) {

    super(props);

    this.state = {
      checkedBox: [],
      userSelected: props.getStore().userSelected,
      otherchecked: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.validateOnDemand = true; // this flag enables onBlur validation as user fills forms

    this.validationCheck = this.validationCheck.bind(this);
    this.isValidated = this.isValidated.bind(this);
  }

  handleCheckboxChange = (event) =>{
    //console.log(event.target.checked);
    const isChecked = event.target.checked;
    if (isChecked) {
        this.setState({ checkedBox: [...this.state.checkedBox, event.target.value] });
       // this.setState({userSelected: this.state.checkedBox}) // attempting to store checked array in state
    } else {
        let index = this.state.checkedBox.indexOf(event.target.value);
        this.state.checkedBox.splice(index, 1);
        this.setState({checkedBox: this.state.checkedBox})
       // this.setState({checkedBox: props.getStore().userSelected}); // attempting to store checked array in state
    }


}

  handleChange() {
    this.setState({
        otherchecked: !this.state.otherchecked
    })
  }


  isValidated() {
    const userInput = this.grabUserInput(); // grab user entered vals
    console.log(this.state.checked)
    const validateNewInput = this.validateData(userInput); // run the new input against the validator
    let isDataValid = false;

    // if full validation passes then save to store and pass as valid
    if (Object.keys(validateNewInput).every((k) => { return validateNewInput[k] === true })) {
        if (this.props.getStore().selectedCheckbox != this.state.checkedBox) { // only update store of something changed
          this.props.updateStore({
            ...userInput,
            savedToCloud: false // use this to notify step4 that some changes took place and prompt the user to save again
          });  // Update store here (this is just an example, in reality you will do it via redux or flux)
        }

        isDataValid = true;
    }
    else {
        // if anything fails then update the UI validation state but NOT the UI Data State
        this.setState(Object.assign(userInput, validateNewInput, this.validationErrors(validateNewInput)));
    }

    return isDataValid;
  }

 handleOther = e => {
    this.handleCheckboxChange(e)
    this.handleChange()
  }

  validationCheck() {
    if (!this.validateOnDemand)
      return;

    const userInput = this.grabUserInput();
    console.log(userInput) // grab user entered vals
    const validateNewInput = this.validateData(userInput); // run the new input against the validator

    this.setState(Object.assign(userInput, validateNewInput, this.validationErrors(validateNewInput)));
  }

   validateData(data) {
    console.log(this.state.checkedBox.length);
    const numChoices = this.state.checkedBox.length
    return  {
      checkboxVal: (numChoices != 0)
      }
  }

  validationErrors(val) {
    const errMsgs = {
      checkboxValMsg: val.checkboxVal ? '' : 'Please make at least one selection'
    }
    return errMsgs;
  }

  grabUserInput() {
    return {
      checked: this.state.selectedCheckbox
    };
  }

Front-end Render for easier viewing

  render() {

    // explicit class assigning based on validation
    let notValidClasses = {};

        if (typeof this.state.checkboxVal == 'undefined' || this.state.checkboxVal) {
      notValidClasses.checkboxCls = 'no-error';
    }
    else {
       notValidClasses.checkboxCls = 'has-error';
       notValidClasses.checkboxValGrpCls = 'val-err-tooltip';
    }

    const otherTextBox = this.state.otherchecked
        ? <div>
          <input
            type="text"
            id="other-user-text"
            name="other"
            className="form-control"
            style=
            onChange={this.handleCheckBoxChange}
            value={this.state.text} />
        </div>
      : null;

    return (
      <div className="step step3">
        <div className="row">
          <form id="Form" className="form-horizontal">
            <legend>
              QUESTION???
            </legend>
            <div className={notValidClasses.refugeeSafetyCls}>
              <div className="checkbox-container">
                <div className="checkbox-container_column">
                  <label className="choice-contain">
                    <span>Selection 1</span>
                    <input
                      value="Selection 1"
                      name="userselected"
                      type="checkbox"
                      onChange={this.handleCheckboxChange}
                    />
                    <div className="choice-input"></div>
                  </label>
                  <label className="choice-contain">
                    <span>
                      Selection 2
                    </span>
                    <input
                      value="Selection 2"
                      name="userselected"
                      type="checkbox"
                      onChange={this.handleCheckboxChange}
                    />
                    <div className="choice-input"></div>
                  </label>
                  <label className="choice-contain">
                    <span>
                      Selection 3
                    </span>
                    <input
                      value="Selection 3"
                      name="userselected"
                      type="checkbox"
                      onChange={this.handleCheckboxChange}
                    />
                    <div className="choice-input"></div>
                  </label>
                  <label className="choice-contain">
                    <span>Other</span>
                   <input
                     value="Other"
                     name="userselected"
                     type="checkbox"
                     id="other-checkbox"
                     onChange={this.handleOther}
                   />
                  <div className="choice-input"></div>
                  </label>
                  {otherTextBox}
                  </div>
                <div className={notValidClasses.checkboxValGrpCls}>
                {this.state.checkboxValMsg}
                </div>
          </form>
        </div>
      </div>
    );
  }
}

What I've tried: I have the array of checked boxes being stored within "checkedBox" and then that being stored into userSelected with setState and props.getStore using the handler. But, when I move onto the next component and try to pull the "userSelected" values, it's pulled as empty.

Even though, pulling the "userSelected" and "checkedBox" array from this screen show that they're properly being stored.

  handleCheckboxChange = (event) =>{
    //console.log(event.target.checked);
    
    const isChecked = event.target.checked;
    if (isChecked) {
        this.setState({ checkedBox: [...this.state.checkedBox, event.target.value] });
        this.setState({userSelected: this.state.checkedBox}) // attempting to store checked array in state

    } else {
        let index = this.state.checkedBox.indexOf(event.target.value);
        this.state.checkedBox.splice(index, 1);
        this.setState({checkedBox: this.state.checkedBox})
        this.setState({checkedBox: props.getStore().userSelected}); // attempting to store checked array in state

    }