Store multiple Checkbox values in Firestore in Flutter

I develop an applicaion for elderly, when they sing up, the app requires from them to select which chronic disease they have from multiple Checkbox that in DropDown. then I want to store these multiple choices in Cloud Firestore, I need to know how to stroe it? my code is:

import 'package:flutter/material.dart';
import 'Constants.dart';
import 'checkBox.dart';
class ChronicDiseaseDropDown extends StatelessWidget {
  Color borderColor;
  Color hintColor;
  Color iconColor;
  ChronicDiseaseDropDown({
    this.borderColor = white,
    this.hintColor = white,
    this.iconColor = white,
  });
  @override

  //List<Map<String, String>> chronicDisease= [{'id':'1', 'disease':'أمراض القلب'},];

  final chronicDiseaseList = const [
    {'id': 1, 'disease': 'أمراض القلب'},
    {'id': 2, 'disease': 'أمراض السكري'},
    {'id': 3, 'disease': 'أمراض الجهاز التنفسي'},
    {'id': 4, 'disease': 'أمراض السرطان'},
    {'id': 5, 'disease': 'أمراض ارتفاع ضغط الدم'},
  ];

  bool isHeartDisease = false;
  bool isDiabetes = false;
  bool isRespiratorySystemDisease = false;
  bool isCancer = false;
  bool isHighBloodDisease = false;



  String dropdownValue = 'First';
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      width: 350,
      child: DropdownButtonFormField(
        iconSize: 50,
        iconEnabledColor: iconColor,
        decoration: InputDecoration(
          hintText: 'الأمراض المزمنة',
          hintStyle: TextStyle(
              fontSize: 23, fontWeight: FontWeight.bold, color: hintColor),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: borderColor,
            ),
            borderRadius: BorderRadius.circular(30.0),
          ),
        ),
        items: [
          DropdownMenuItem(
            child: Row(
              children: <Widget>[
                CheckboxSelectorPage(isHeartDisease),
                Text(
                  chronicDiseaseList[0]['disease'],
                  style: textStyle1,
                ),
              ],
            ),
          ),
          DropdownMenuItem(
            child: Row(
              children: <Widget>[
                CheckboxSelectorPage(isDiabetes),
                Text(
                  chronicDiseaseList[1]['disease'],
                  style: textStyle1,
                ),
              ],
            ),
          ),
          DropdownMenuItem(
            child: Row(
              children: <Widget>[
                CheckboxSelectorPage(isRespiratorySystemDisease),
                Text(
                  chronicDiseaseList[2]['disease'],
                  style: textStyle1,
                ),
              ],
            ),
          ),
          DropdownMenuItem(
            child: Row(
              children: <Widget>[
                CheckboxSelectorPage(isCancer),
                Text(
                  chronicDiseaseList[3]['disease'],
                  style: textStyle1,
                ),
              ],
            ),
          ),
          DropdownMenuItem(
            child: Row(
              children: <Widget>[
                CheckboxSelectorPage(isHighBloodDisease),
                Text(
                  chronicDiseaseList[4]['disease'],
                  style: textStyle1,
                ),
              ],
            ),
          )
        ].toList(),
        onChanged: (value) {},
      ),
    );
  }
}

I want to store checkbox values in field ChronicDisease:

issue creating a popup and do not ask again check box in js

I was an issue with creating cookies to do not ask checkboxI want to create this type popup also cookies in website here is my html and js code please reviews my code and please help me sort this problem.

enter image description here enter image description here

Get "checked=true/false" value of checkbox from inside HTML attributes

I want to enable and disable checkboxes based on two variables: 1) Is there already a checked count of 2+, 2) Is the current checkbox enabled or disabled. i.e. I have a list of items, and I want to limit the user to only selecting two out of (potentially) endless options.

I have a handleCheck() function, but I think by the time that's applied it's already too late to control the checked value of the checkbox, right? Because I can successfully call alert() after the user has checked their third box, but then the check appears anyway; I can't stop it from being checked. That's why I'd like to put the control inside the HTML: the checkbox will be disabled if the count is more than two and the user hasn't chosen this checkbox. In order to choose this checkbox, they'd have to deselect another.

What I essentially want to do is this:

disabled={count >= 2 && thisCheckbox.checked === false}

I'm using React to dynamically render checkbox + a whole load of data and visuals on a case-by-case basis, so it's not like all the checkboxes are in one neat form.

I've tried various SO threads but most of them use jQuery or do their handling in JS in the onChange function (handleCheck(), in my case), which is already too late because the check will still be applied (as far as I know).

WooCommerce checkout: HuCommerce payment checkboxes are not visible

I use Wordpress and woocommerce https://wordpress.org/plugins/surbma-magyar-woocommerce/

And businessx theme https://themeforest.net/item/kidz-baby-store-woocommerce-theme/17688768

My problem is the checkbox are not visible and i need to show the checkbox

I add an image to show the problem: error.jpeg

How can I create interactive checkboxes in my React JS app?

Description

I'm very new to React JS, which will probably show in my code. I'm trying to make a simple to-do app that will help me get my head around coding with React. The app should simply display "Complete" if a checkbox is checked and "Incomplete" if it isn't. However, the checkboxes aren't updating on click.

I think that the problem is to do with not understanding React logic, resulting in the Checkbox() function being called over and over with default variables (eg: checked == true).

Any advice would be appreciated!

Code and Examples

A screenshot as an example:

File tree (excluding node_modules folder):

.
├── package.json
├── package-lock.json
├── public
│   └── index.html
└── src
    ├── App.js
    ├── Checkbox.js
    ├── index.css
    ├── index.js
    ├── TableBody.js
    ├── TableHeader.js
    └── Table.js

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import { Component } from "react";
import Table from "./Table"

class App extends Component {
  render() {
    const tasks = [
      {
        status: "incomplete",
        task: "Wash Dishes"
      },
      {
        status: "complete",
        task: "Pat Dog"
      },
      {
        status: "incomplete",
        task: "Study"
      }
    ]

    return (
      <div>
        <Table tasks={tasks}/>
      </div>
    )
  }
}

export default App;

Table.js:

import TableHeader from "./TableHeader"
import TableBody from "./TableBody"
import { Component } from "react"

class Table extends Component {
    render () {
        const {tasks} = this.props
        return (
            <div className="table container">
                <TableHeader />
                <TableBody tasks={tasks}/>
            </div>

        )
    }
}

export default Table

TableBody.js

import Checkbox from './Checkbox'

const TableBody = (props) => {
    // takes the properties of the Table object and creates table rows by mapping
    // elements in the array. Returns a table body.

    const rows = props.tasks.map((row, index) => {
        return (
            <tr key={index}>
                <td><Checkbox /></td>
                <td>{row.task}</td>
            </tr>
        )
    })

    return <tbody>{rows}</tbody>
} 

export default TableBody

TableHeader.js

const TableHeader = () => {
    return (
        <thead>
            <tr>
                <th>Status</th>
                <th>Task</th>
            </tr>
        </thead>
    )
}

export default TableHeader

Checkbox.js

const checkStatus = (checked) => {
    var status = "Something's gone wrong."
    if (checked) {
        var status = "Complete"
    } else if (checked == false) {
        var status = "Incomplete"
    } else {
    }
    return status
}

const Checkbox = () => {
    const input = <input class="form-check-input" type="checkbox" checked></input>
    const status = checkStatus(input.props.checked)
    return (
        <div class="custom-control custom-textbox">
            {input}
            <label>{status}</label>
        </div>
    )
}

export default Checkbox

How to focus and select a checkbox using React ref?

I have been looking around a method to correctly focus and select a checkbox in React code. The methods focus() and select() that I'm using in the example below are not working :

import React, { useRef } from "react";

export const HelloWorld = () => {
  const checkboxref = useRef(null);

  const handleOnClick = () => {
    checkboxref.current.focus();
    checkboxref.current.select();
  };

  return (
    <div>
      <button onClick={handleOnClick}>Focus</button>
      <input type="checkbox" ref={checkboxref} />
    </div>
  );
};

When I click on the button, my checkbox is not focused and not selected...

Any solution please ?

Thank you so much.

Visual Studio mvc update multiple data by one click

I am using Visual Studio with the ASP.NET MVC framework.

I have data in SQL, I want to bring it to Visual Studio in a table with checkbox buttons, then when the user checks the button such as "update" I want to update multiple columns in the data such as "year", "semester"...etc ،

I want data to be changed in the code, not by the user.

How can I make checkbox (UIButton) in cellForRowAt method of tableview?

Currently I am making the image change when the checkbox button is pressed, the code works fine, but every time the cell is updated, the checkbox button item and the cell operate separately...

I want to make the checkMarkButtonClicked function work in cellForRowAt.

I searched Google and YouTube all the examples but couldn't find a suitable answer. I'm also using a state config of tableViewCell option:

Here's my code:

// tableView Settings
extension HomeViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ListTableViewCell", for: indexPath) as! ListTableViewCell
        
        cell.todoLabel.text = list[indexPath.row].todoTask
        
        cell.colorCircle.backgroundColor = .black
        cell.colorCircle.layer.cornerRadius = cell.colorCircle.frame.size.width / 2
        cell.colorCircle.clipsToBounds = true
        //        cell.checkButton.setImage(UIImage(named: "checkBox"), for: .normal)
        
        cell.checkButton.addTarget(self, action: #selector(checkMarkButtonClicked(sender:)), for: .touchUpInside)
        return cell
    }
    
    @objc func checkMarkButtonClicked(sender: UIButton) {
        print("Button pressed")
        
        if sender.isSelected {
            // uncheck the button
            sender.isSelected = false
        } else {
            // checkmark into
            sender.isSelected = true
        }
        self.homeTableView.reloadData()
    }

Multiple selections return a value

I have 3 checkboxes and each checkbox returns different numerical values in a table. However, I want to add another option so that if both 'covidBtn' AND 'secondPropBtn' are selected, it will return 'secondCovidBuyer' values. I would really appreciate it if anyone is able to help me! Thank you.

Return Values

// Different tax percentages and taxBand data
  standBuyer: [0, 0.02, 0.05, 0.05, 0.05, 0.10, 0.12],
  firstBuyer: [0, 0, 0, 0.05],
  secBuyer: [0.03, 0.05, 0.08, 0.08, 0.08, 0.13, 0.15],
  covidBuyer: [0, 0, 0, 0, 0.05, 0.10, 0.12],
  secondCovidBuyer: [0.03, 0.03, 0.03, 0.03, 0.08, 0.13, 0.15],
  taxBand: [0, 125000, 250000, 300000, 500000, 925000, 1500000, Infinity],

Function

getBuyerType: function() {
            if (document.getElementById(DOMstrings.firstTimeBtn).checked == true) {
                return 'firstBuyer';
            } else if (document.getElementById(DOMstrings.secondPropBtn).checked == true) {
                return 'secBuyer';
    } else if (document.getElementById(DOMstrings.covidBtn).checked == true) {
                return 'covidBuyer';
            } else {
                return 'standBuyer';
            }
        },

replace heatmap input vector if checkbox selected by input selector value in Shiny

I’m still a rookie at shiny and I’m really struggling. I inherited a complex code that I’ve been modifying. I’m stuck on something : A table returns values, I managed to pull the average and make it appear below that table (project_gap_table). I added a checkbox (override) that if clicked offers the possibility to change that average with an input selector (gapover). The issue I have is that I don’t know where to input a condition so that the input selection replaces that average that feeds into a heatmap. I’ve tried for 2 days now. I suspect I can’t call the checkbox that’s in the UI but I don’t know how to do it. My UI and servers are too long so here are parts of them :

column(
                6,
                DTOutput(ns('project_gap_table')) %>% withSpinner(),
                align="right",textOutput(ns("selected_var")),
                fluidRow(column(3,
                  class = "text-left",
                  checkboxInput(inputId = "override",
                                "Override Gap Suggestion",
                                value=FALSE#,
                                #multiple = FALSE,
                                #selected = c(0),
                                #inline = TRUE
                  )
                ),

                conditionalPanel(condition = "input.override == 1",
                    (column(5,offset=1,textInput(
                      ns('rational'),
                      'Rational',
                      width = '100%'
                    ))),column(3,
                               id="gapover",
                               pickerInput(
                                 ns("gapover"),
                                 "Gap Overriding",
                                 choices = choices$gapover,
                                 multiple = FALSE,
                                 width = "100%"
                      )),textOutput(ns("gapover"))
                    )

                    ),

Parts of my server :

  gap_selection <- reactive({input$gapover})
  output$gapover <- renderText({
    gap_selection()
  })

  project_gap_score <- reactive({
     req(input$gapover)
     if_else(input$override == 0,
    (project_gap_table_prep() %>%
      select(rank) %>%
      drop_na() %>%
      mutate(rank = as.numeric(str_extract(rank, '\\d{1}'))) %>%
      summarise(score = round(mean(rank))) %>%
      mutate(
        label = case_when(
          score == 1 ~ 'Low',
          score == 2 ~ 'Medium',
          score == 3 ~ 'Large',
          score == 4 ~ 'Very Large'
        ))
       ),
     gap_selection)
  })

  output$selected_var <- renderText({
    paste("Suggested rating", project_gap_score()$label)
  })

I get the error Warning: Error in : true must be length 0 (length of condition) or one, not 2.

The only other option I’m considering is creating a condition in the UI to output a different table if that box is checked. Any word of advice will be appreciated!

How I can get the cell value when I am clicking near the checkbox used in that cell in ag grid

I am having a grid in angular project and one of the column contains checkbox. I have one condition which states that if I'll click the unchecked checkbox in the cell it will become checked but if I'll click on checked checkbox in the cell it will show one warning popup which states 'You are unchecking the checkbox'. This is working fine. But if the checkbox is unchecked and I am clicking near the checkbox in the same cell, it is showing the warning popup even for unchecked too that 'I am unchecking the checkbox'.

How I can resolve this? Any solution from anyone will be helpful for me.

Thanks in advance.

Spring MVC Form Checkbox vs Checkboxes

I am facing strange problem with form:checkbox attribute in my Spring MVC form. I am trying to display and edit checkbox values and I don't understand why "form:checkboxes" is working and "form:checkbox" is not.

Here is my code:

form:checkboxes
<form:checkboxes path="packing" items="${packList}" itemValue="id" itemLabel="name" />
<br /><br />
form:checkbox
<c:forEach items="${packList}" var="pack" varStatus="packStatus">
   <form:checkbox path="packing"  value="${pack.id}" label="${pack.name}" />
</c:forEach>

First checkbox is working, the second one in forEach is not checked and I do not why. The result page screenshot: Result page

Am I doing anything wrong? Unfortunately I have to use checkbox with forEach to add more elements.

I am using Spring version 5.1.9.RELEASE

Any advice is appreciated!

Dropdown menu select required if checkbox is checked

I'm going to ask you a help with HTML/Javascript (I must not use Jquery).

I have a document with lots of checkboxes. Usually I check one or more checkboxes and I click the button Save to pass to another page. Only if I check the checkbox with the id "cool" it has to be mandatory to select one choice from the dropdown menu with id "list". So if I select the checkbox "cool" and I don't select a choice from the dropmenu it must not be possible to save the page. I tried several codes with javascript (script one and script two) but they don't work. Can you help me?

This is the checkbox

<input type="checkbox" id="cool" name="Performance" value="ON">

This is the dropdown menu

<select id="list" name="Info">
         <option></option>
         <option>Cat</option>
         <option>Dog</option>
         <option>Bird</option>
        </select>

Script One I tried

<script>
   function scriptone()
     {
       var checkBox=document.getElementById("cool");
       if (checkBox.checked == true)
          {     document.getElementById("list").required =  true;
          } 
      }
</SCRIPT>

Script Two I tried

<script>
        document.getElementById("cool").addEventListener('change', function(){
        document.getElementById("list").required =  this.checked;
 }  
</SCRIPT>

Let me know if you need further information. Thank you.

How can I create a checkbox component based on value of TextField?

I have 3 components - 2 textfield and 1 checkbox Material UI component. I want the checkbox checked only if there is value in textfield component? What would be the best way to implement this?

Here is the link to my code:

https://codesandbox.io/s/material-demo-forked-utbtl?file=/demo.tsx

How to get Checklist box Items posted to SQL table

Working on a small project using WinForms to input data into a SQL DB. I have most of the fields working except the checklist Items box. The Checklist item box is populated with data from one table in the DB multi items can be selected and the need to be posted to a separate table in the same DB. Data is connected using EF6. I can get the code to post the value but not the selected text.

   (MedToxDatabaseEntities2 db = new MedToxDatabaseEntities2())
        {
            MedToxDatabaseSP.Patient patient = new Patient();

            // **** Patient Section of the main dashboard *****
            patient.EncounterDate = DateConsult.Value;
            patient.FirstName = TxbFirstName.Text;
            patient.LastName = TxbLastName.Text;
            patient.DOB = DOB.Value;
            string MRN = TxbMRN.Text;
            patient.PatientMedicalRecordNumber = Decimal.Parse(MRN);
            patient.ExposureName = CboExposure.Text;
            patient.InstitutionName = CboHospital.Text;
            patient.LocationName = CboHospitalLocation.Text;
            string Redcap = TxbRedCapNumber.Text;
            patient.RedcapNumber = Decimal.Parse(Redcap);


            // ****** Clinical Section of the dasbboard *******

            patient.ToxidromeName = CheckListToxidrome.SelectedValue.ToString();`

Checkbox checked attribute behavior

I have a list of inputs of type checkbox in HTML, and JS uses an array variable to mark some of them as checked, like this:

profileData.interests.forEach(interest => {
 $(`#profile-interests input#${interest}`).attr("checked", true)
})

Then the user is free to check / uncheck any inputs, and once he's done, he can click save, and I need to get the list of currently checked inputs (their IDs) and put them in a variable.

If I use this code, the list of inputs will be the initial one (from the initial variable):

$("#profile-interests input").each(function() {
    if ($(this).attr('checked')) {
      newInterests.push($(this).attr('id'))
    }
})

If I use this code, the list of inputs is correct and corresponds to what I see on the page:

$("#profile-interests input:checked").each(function() {
  newInterests.push($(this).attr('id'))
})

What's wrong with the first option?

Thanks!

Array of checkbox items, that if selected populate 4 dropdown lists, which then if selected in 1 dropdown removes that item from the other 3

I have a set of 38 translation languages that a client can currently choose from by means of 38 checkboxes. Once client chooses the total translations that are required, they can then decide which of these are the top 4 languages that go on the 2 primary faces of the packaging - 2 languages front, 2 languages rear, which are currently as 4 dropdown lists.

I have done a similar dependency lists set before(with much help from a friend), but this has been from a set list that does not vary depending on client choice.

Is there a way to add the selections from the checkboxes into this function as the 'buttonData'? Or just a better way of achieving this please?

Button Javascript:

loadP1Contents(["text_contents_p1"], {"A - Total Clean Shower Gel":[],"B - Carbon Protect 150ml Deo":[],"C - Clean Power Shower Gel":[],"D - Cool Power Shower Gel":[],"E - Invincible Grey Shower Gel":[],"F - Invincible Sport Shower Gel":[],"G - Hydra Energetic Shower Gel":[],"H - Hydra Sensitive Shower Gel":[],"I - Hydra Power Shower Gel":[]});

Function:

function loadP1Contents(fieldsData, buttonData)
{
var cChoiceArray = [[]];
var currentMenuLevel = 0;
cChoiceArray[currentMenuLevel] = ["Please Select...","-- None --"];
var subMenuCounter = [];
subMenuCounter[currentMenuLevel] = 0;

mutualExcludeFields = ["text_contents_p1","text_contents_p2","text_contents_p3","text_contents_p4","text_contents_p5"];
mutualExcludeChoices = [];

for (i = 0; i < mutualExcludeFields.length; i++) {
mutualExcludeChoices.push(this.getField(mutualExcludeFields[i]).value);
};

for (var choiceToAdd in buttonData) {

var alreadyPresent = false;
for (i = 0; i < mutualExcludeChoices.length; i++) {
if (mutualExcludeChoices[i] == choiceToAdd) {
alreadyPresent = true;
};
};      

if (!alreadyPresent) {
if (buttonData[choiceToAdd][0] == "sub") {
currentMenuLevel += 1;
subMenuCounter[currentMenuLevel] = buttonData[choiceToAdd][1];
cChoiceArray[currentMenuLevel] = [choiceToAdd];
} else {
cChoiceArray[currentMenuLevel].push(choiceToAdd);
subMenuCounter[currentMenuLevel] -= 1; 
};
while (currentMenuLevel > 0 && subMenuCounter[currentMenuLevel] < 1) {
currentMenuLevel -= 1;
cChoiceArray[currentMenuLevel].push(cChoiceArray[currentMenuLevel+1]);
subMenuCounter[currentMenuLevel] -= 1; 
};
};
};

var cChoice = app.popUpMenu(cChoiceArray[0]);

if (cChoice == "-- None --" || cChoice == "Please Select..." || cChoice == null || buttonData[cChoice][0] == "sub") {
for (i = 0; i < fieldsData.length; i++) {
this.getField(fieldsData[i]).value = "-";
}
} else {
this.getField(fieldsData[0]).value = cChoice;
for (i = 1; i < fieldsData.length; i++) {
if (buttonData[cChoice][i-1] != null) {
this.getField(fieldsData[i]).value = buttonData[cChoice][i-1];
} else {
this.getField(fieldsData[i]).value = "N/A";
}
}
}
};

Create a list depending on the checkboxes

I have a list of industries and sub-industries of a sector and a list of several companies with their sector, industry, and sub-industry.

Until now I've filtered depending on one parameter (in this case sub-industry). This is the formula:

=FILTER ( J2:M12 ; M2:M12 = filter ( H2:H8 ; G2:G8 = TRUE() ) )

I want to filter the company list depending on if the checkbox is true or false. If several checkboxes are selected, show in the list these companies, only uniques values.

If it is possible do not use query function due I want to maintain future hyperlinks.

For example, if I only select Energy's checkbox, it will only display all Energy companies. If I only select Oil Gas & Consumable Fuels' checkbox, it will only display all Oil Gas & Consumable Fuels companies.

But if I select both Oil Gas & Consumable Fuels and Energy Equipment & Services, it will display these companies. Or selecting different sub-industries, but the aim is to display the companies that are in the selected groups.

Thanks in advance, if something isn't clear let me know.

Example's Spreafsheed: https://docs.google.com/spreadsheets/d/1c9cp0J4m1M-HbnDr_TliknuPSXHgdqkuuzAvzK75zC8/edit?usp=sharing

VB.NEt ListView - Changing Background Colour of Selected Item Hides Checkboxes

I found the following code which does a good job of modifying the background colour of selected items. This is a listview with checkboxes highlighted so I want the colour bar to shift 20 to the right to clear the checkbox column, by adding 20 to the bounds it does the job, although it also shifts the subitems so that they are right of their columns. However, the checkbox for that line disappears. Any ideas about getting the checkbox back, I've looked through DrawListViewSubItemEventArgs and cannot see anything that will do it. How do I get the checkboxes back and also, can I leave the subitem columns where they should be without shifting them right?

Private Sub lsvFileList2_DrawSubItem(sender As Object, e As DrawListViewSubItemEventArgs) Handles lsvFileList2.DrawSubItem
    Dim NewBounds As Rectangle

    If e.Item.Selected = True Then
        NewBounds = e.Bounds
        NewBounds.X = e.Bounds.X + 20
        e.Graphics.FillRectangle(New SolidBrush(Color.Purple), NewBounds)
        TextRenderer.DrawText(e.Graphics, e.SubItem.Text, New Font(Me.Font, Nothing), New Point(e.Bounds.Left + 23, e.Bounds.Top + 2), Color.AntiqueWhite)

    Else
        e.DrawDefault = True
    End If
End Sub

How to keep checkbox checked in modals after page refresh using jquery?

This is my modal that includes some checkboxes with an option to select all, please let me know how to keep the boxes checked after I refresh the page only using jquery not localstorage:

<!--Modal-->
    <div class="modal fade" id="invoiceOptions" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body text-justify">
            <form class="form">
              <div class="form-group">
                  <div class="input-group checkbox">
                    <label>
                      <input  type="checkbox" name="select-all" id="checkAll"/>
                      Select All
                    </label>
                    <br>
                      <label>
                        <input type="checkbox" class="invoiceOption"/>
                        Item 1
                      </label>
                      <label>
                        <input type="checkbox" class="invoiceOption"/>
                        Item 2
                      </label>
                     <label>
                        <input type="checkbox" class="invoiceOption"/>
                        Item 3
                      </label>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="saveBtn" value="" data-dismiss="modal">
                  save
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--/Modal-->

This is the jquery script for my modal:

      <script>
      $('#checkAll').click(function(event) {
     if(this.checked) {
     $('.invoiceOption').each(function() {
      this.checked = true;
    
    });
    } else {
    $('.invoiceOption').each(function() {
      this.checked = false;
  
    });
   }
 });
</script>

how to handle checkboxes with multiple rows?

I had a file that has this composition (row was loading from the table):

 row:
    id
    name
    status


 const toggleCheckbox = (row) => {
    const rowId = view.filter((viewItem) => viewItem.id === row.id);
    if (rowId.length === 0) {
        setView(row.name)
        row.status = true
    } else {
        setView(view.filter((viewItem) => viewItem.id !=== row.id);
        row.status = false;
    }
    saves in table
 }
  
 <TableBody>
     {row.map((row) => 
         <TableRow key={row.id}>
              <TableCell align='center'>
                    <Checkbox color={'default'}
                              onChange={() => toggleCheckbox(row)}
                    />
              </TableCell>
              <TableCell>
                  {row.name}
              </TableCell>
         </TableRow>)}
      </TableBody>

 {view.map((item) => (
      <h1>view.name</view>)}

Now I would explain what toggleCheckbox does, Everytime the checkbox is check, the information below will appear (view) map then I have control in the checkboxes manually. My problem is when it loads a new file where some of the data has a status equal true then the checkbox is check and view also triggers on that row and still I have control manually.

Create a Material Ui checkbox with textfiled

How to create a Material ui checkbox which when checked will disable Textfield and fixed the alignment?

Link to sandbox:

https://codesandbox.io/s/material-demo-forked-mfnqk?file=/demo.tsx

How to check/uncheck value in a DataGridViewCheckBoxColumn when adding rows from database? c#

I have a DataGridView where I am adding values to from a Database select like so:

using (SqlDataReader Read = Com.ExecuteReader())
                {
                    while (Read.Read())
                    {
                        if(Read["VerificationStatus"].ToString() == "VERIFIED")
                        {
                            verify = "true";
                        } 
                        else
                        {
                            verify = "false";
                        }

                        if (Read["Penalty"].ToString() == "Y")
                        {
                            penalty = "true";
                        }
                        else
                        {
                            penalty = "false";
                        }

                        paymentsTbl.Rows.Add(Read["PaymentID"].ToString(), Read["PrimaryHolder"].ToString(), Read["CertificateNum"].ToString(), Read["IntStartDate"].ToString(), Read["IntEndDate"].ToString(),
                            Read["PaymentAmount"].ToString(), Read["RoundedInterest"].ToString(), verify, penalty, Read["PenaltyAmt"].ToString(), Read["TotalPaid"].ToString());

                    }
                }

However, where I am adding the "true" and "false" values it gives me an error whereby the value cannot be implicitly converted. Tried this with a bool value as well. What is the correct procedure for this?

Send HTML Checkbox Form Data through AJAX

I have a HTML Form set up like this:

<form class="modal-content start-planning " id="ProfileStep2" name="ProfileStep2" method="POST">
                    <div class="planroll-nav">
                        <a href="#" class="prev" onclick="GoToStep('ProfileStep1')">Back</a>
                        <span>2 / 8</span>
                        <a href="#" class="next" onclick="GoToStep('ProfileStep3')">Skip</a>
                    </div>
                    <div class="planroll-imgbx" style="background-image:url(images/icon/pic2.png)"></div>
                    <div class="start-here-bx">
                        <div class="">
                            <div class="planroll-title">
                                <h3>Select up to 5 ideal Wedding Styles...</h3>
                            </div>
                            <input type="hidden" id="userid" name="userid" value="<? echo $user_id; ?>">
                            <ul class="select-list clearfix list-inline list-2">
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style1" name="style1" value="Traditional">
                                        <label class="custom-control-label" for="style1">Traditional</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style2" name="style2" value="Alternative">
                                        <label class="custom-control-label" for="style2">Alternative</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style3" name="style3" value="Festival">
                                        <label class="custom-control-label" for="style3">Festival</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style4" name="style4" value="Goth">
                                        <label class="custom-control-label" for="style4">Goth</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style5" name="style5" value="Urban">
                                        <label class="custom-control-label" for="style5">Urban</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style6" name="style6" value="DIY">
                                        <label class="custom-control-label" for="style6">DIY</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style7" name="style7" value="Rustic">
                                        <label class="custom-control-label" for="style7">Rustic</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style8" name="style8" value="Historical">
                                        <label class="custom-control-label" for="style8">Historical</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style9" name="style9" value="Religious">
                                        <label class="custom-control-label" for="style9">Religious</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style10" name="style10" value="Vintage">
                                        <label class="custom-control-label" for="style10">Vintage</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style11" name="style11" value="Elegant">
                                        <label class="custom-control-label" for="style11">Elegant</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style12" name="style12" value="Themed">
                                        <label class="custom-control-label" for="style12">Themed</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style13" name="style13" value="Vegan">
                                        <label class="custom-control-label" for="style13">Vegan</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style14" name="style14" value="Eco-Friendly">
                                        <label class="custom-control-label" for="style14">Eco-Friendly</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style15" name="style15" value="Musical">
                                        <label class="custom-control-label" for="style15">Musical</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style16" name="style16" value="Boho">
                                        <label class="custom-control-label" for="style16">Boho</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style17" name="style17" value="Country">
                                        <label class="custom-control-label" for="style17">Country</label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer text-center">
                        <button type="submit" id="ProfileStep2" name="ProfileStep2" class="btn gradient" data-toggle="tooltip" data-placement="top" onclick="GoToStep('ProfileStep3')" title="Congrats! Even your names look great together.">Next Step</button>
                    </div>
                </form>

I am trying to pass the data through an AJAX script on Form Submit using the following script

$(document).ready(function(){
                $('#ProfileStep2').on('submit', function(e){
                    
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var userid2 = $('#userid').val();
                    var style1 = $('#style1').val();
                    var style2 = $('#style2').val();
                    var style3 = $('#style3').val();
                    var style4 = $('#style4').val();
                    var style5 = $('#style5').val();
                    var style6 = $('#style6').val();
                    var style7 = $('#style7').val();
                    var style8 = $('#style8').val();
                    var style9 = $('#style9').val();
                    var style10 = $('#style10').val();
                    var style11 = $('#style11').val();
                    var style12 = $('#style12').val();
                    var style13 = $('#style13').val();
                    var style14 = $('#style14').val();
                    $.ajax({
                        type: "POST",
                        url: 'system/wedmanagerdata.php',
                        data: {userid2: userid2, style1: style1, style2: style2, style3: style3, style4: style4, style5: style5, style6: style6, style7: style7, style8: style8, style9: style9, style10: style10, style11: style11, style12: style12, style13: style13, style14: style14},
                        success: function(data){
                            alert(data);
                        }
                    });
                });
            });

And then on the PHP side, I am processing the data with a simple PHP script

$userid2 = false;
if(isset($_POST['userid2'])){
    $userid2 = $conn->real_escape_string($_POST['userid2']);
    $style1 = $conn->real_escape_string($_POST['style1']);
    $style2 = $conn->real_escape_string($_POST['style2']);

}

I had to try this way as I couldn't get the script working with the input as id="style[]" without the page refreshing or breaking the AJAX script. The issue is, the AJAX is sending constant on positions for the checkboxes, which means all variables are showing and not just the ones selected? If anybody has a better functional method which they can help me with that would be great?

make input (checkbox) disable when one of checkboxes is clicked in vue.js

I've been working on this problem and I searched about this for an hour, but none of the answers led me to the correct answer.

I have three items(sorry I hard coded) which every single item contains one input(checkbox), and what I want to achieve is when one of the checkboxes is clicked, make others disable to click in vue.js.

<template>
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
</template>

<script>
    export default {
        data: function () {
            selectedContent: [],
        }, 
        methods: {
            addContent: function(data) {
                if (this.selectedContent.length === 0){
                  this.selectedContent.push(data);
                }
            }
        }
    }
</script>

I read I need :disabled to make input disable, so I thought after I push one item to selectedContent, it'd disable my inputs, but it doesn't. I can still clickable other inputs even after I checked one of them. Can anyone point me out what I'm doing wrong?

Check all checkbox, remove child element vuejs

enter code hereenter link description here

enter code hereHelp me. I check child element, then i click parent element. When i click parent element, i can not remove

Select several items in select option vie

Is there a way to do a checkbox inside select option vue? Right now I have the following code:

<select required>
   <option v-for=“item in items” :key=“item.id” value=item.id></option>
</select>

I need to make it possible to choose several options while selecting. Is there a way to do so?

Defaulting Show/Hide to Hide with pure CSS using checkbox

I am looking to have the 'item value appears here' to be hidden by default on landing on the page or refreshing. I am using a checkbox with a label to be used as the show/hide click. This appears in 3 columns and currently clicking 'show' on the left column makes all 3 item values appear (this is not a problem and as I do not wish to use JavaScript, happy with this, although if clicking on one only unhides one value with css then I'm all ears!).

I am not able to use JavaScript and feel there must be a way to do this with CSS using checkboxes - any help will be greatly appreciated!

 <div class="key-items-wrapper">
       <div class="left-column">
               <img src="/images/item.png"> 
                    <div class="center-column-text">
                         <p>item name</p>
                           <div class="content">
                                 <p>item value appears here</p>                            
                                </div>                        
                                    <input id="checkbox-privacymode" type="checkbox"> 
                                    <label for="checkbox-privacymode"></label>
                        </div>
                </div>

This is the code for the checkbox

 #checkbox-privacymode {
    display: none;
    visibility:hidden;
}

#checkbox-privacymode + label {
    display: block;
    padding-right: 52px;
    height: 35px;
    background: transparent url(/images/eye-hidden.png) no-repeat scroll right center;
    float: right;
    font-size: 0.9em;
    color: #777;
    cursor: pointer;
}

#checkbox-privacymode + label::before {
    content: 'hide';
}

#checkbox-privacymode:checked + label {
    background-image: url(/images/eye.png);
    display:block;
}

#checkbox-privacymode:checked + label::before {
    content: 'show';
}

Many Thanks

radiobutton hovering bug that cannot be solved by preventing it from garbage collection tkinter

I was going through some code and came across this one, where while hovering the mouse over the radiobuttons, the Checkbutton gets selected, I have tried keeping a reference to variable(shouldn't be needed as is already global), but it fails.

Here is the code:

from tkinter import *

root = Tk()

text_colors = ['1','2','3','4','5','6','7','8']
rads = []
for i in range(4):
    for j in range(2):
        col = text_colors.pop()
        val = IntVar()
        root.garbage_saver = val
        rads.append(Radiobutton(root,text=col,fg='red',variable=val))
        rads[-1].grid(row=i,column=j)

root.mainloop()

This bug is reproducible on my Windows 10, Python 3.9

How to clear checkbox and alert if I select YES or NO?

I have a set of list selection field above as YES and NO within a fieldset. And a set of checkboxes in another fieldset below.

What I expect to happen via a jquery is

• If I select NO in the list above, an alert should appear and checkboxes below will clear out. I have tried the following but not able to get it work. Can anyone help please? Thanks

     $('#enable_email').change(function() {
     if ($('#enable_email').attr("value")=="NO"))) {
          Swal.fire({
              title: 'Alert'
            });
    $("input[name=group_101]").removeAttr('checked');
          }

<div class="crm-communications-preferences-form-block crm-public">
    
        <div class="comm-pref-block groups-block">
    
        <fieldset id="crm-communications-preferences-channels">
            <div class="crm-section">
            <div class="label"><label for="enable_email">  Email Newsletter
         <span class="crm-marker" title="This field is required.">*</span>
    </label></div>
            <div class="content"><select name="enable_email" id="enable_email" class="crm-form-select required">
        <option value="">--Select--</option>
        <option value="YES" selected="selected">Yes</option>
        <option value="NO">No</option>
    </select></div>
          </div>
                        </fieldset>
                </div>
    </div>

        <!-- Groups from settings -->
        <div class="comm-pref-block groups-block">
    
            <!-- Groups Fieldset -->
    <fieldset id="crm-communications-preferences-groups" class="groups-fieldset">
    <div class="crm-section">
    <div class="content group-channel-div">
    <input id="group_101" name="group_101" type="checkbox" value="1" checked="checked" class="crm-form-checkbox">
<label for="group_101">Newsletter</label>
        <span class="group-description">Monthly Newsletter</span>
                 </div>
                  </div>
    <div class="crm-section">
    <div class="content group-channel-div">
    <input id="group_102" name="group_102" type="checkbox" value="1" checked="checked" class="crm-form-checkbox">
                        <label for="group_102">Communications</label>
        <span class="group-description">Relating Activities</span>
                 </div>
                  </div>
                </fieldset>
                </div>
    </div>

WordPress: Why doesn't custom field checkbox appear in the template, but only its label and instruction

I created a custom field group with two fields one of which is a checkbox. The checkbox doesn't appear, but its label and the instruction for the checkbox, so I cannot click the actual checkbox. I don't seem to have missed any setting for the checkbox while creating it.

How to assign a List of Booleans to a generated Checkbox IsChecked property in WPF?

I've recently started learning C# and I've encountered a problem. I display a set of keywords in a generated checkbox in my WPF and I want to check the element (IsChecked) based on an input check from a TXT file. If the currently selected element from a different listbox matches the read modelclass(from a txt file) then set the checked key true.

I'm generating a Checkbox in my WPF to list a set of keywords that my app reads from a txt file. The txt file contains the following items per line: -id -key -pair -description

WPF code:

 <ListView ItemsSource="{Binding XAMLModelKeywords}" SelectedItem="{Binding XAMLModelKeyword}" Margin="5" x:Name="listofallkeys" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding XAMLAssignedKeys}" Content="{Binding Key}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

C#:

        public ModelTemplates XAMLModelTemplate { get; set; }

        public ModelKeywords XAMLModelKeyword { get; set; }
        public List<bool> XAMLAssignedKeys { get; set; }


        public string XAMLKeyword { get; set; }

        public ViewModelMain()
        {
            //This creates a new instance of ObservableCollection above
            XAMLModelTemplates = new ObservableCollection<ModelTemplates>();
            XAMLModelKeywords = new ObservableCollection<ModelKeywords>();
            XAMLAssignedKeys = new List<bool>();
            Refresh();
        }

     public void Refresh()
        {
            XAMLModelTemplates.Clear();
            foreach (ModelTemplates tpl in ReadInput.ReadTemplateDirectory(Path))
            {
                XAMLModelTemplates.Add(tpl);
            }
            //Selecting the first item from the returned list
            XAMLModelTemplate = XAMLModelTemplates.FirstOrDefault();
    
            XAMLModelKeywords.Clear();
            foreach (ModelKeywords tpl in ReadInput.ReadKeywordsFile(KeyWordsPath))
            {
                XAMLModelKeywords.Add(tpl);
            }
            XAMLModelKeyword = XAMLModelKeywords.FirstOrDefault();
    
            XAMLAssignedKeys.Clear();
            foreach (ModelKeywords tpl in XAMLModelKeywords)
            {
    
                XAMLAssignedKeys.Add(ReadInput.CheckPairedtemplates(tpl, XAMLModelTemplate));
            }

ReadKeywordsFile: Returns a list of Template Models (name of template file, path) and the displays it in a listbox.

ReadKeywordsFile: Returns a list of Keywords Model (id, key, pair, desc) and then displays it in a generated listbox.

CheckPairedtemplates: Returns a list of booleans based on the currently selected Template Model matches the Keywords Model pair (list of string).

TLDR: I have a list of booleans ( XAMLAssignedKeys) and I want to match it to my generated checkbox in WPF, however the generation happens based on an item template and I'm not sure how to link one element from my list of booleans to the checkbox "IsChecked" property.

ScreenshotofApp

Thank you much in advance for the advices.

Customization of checkboxes and radio buttons without hiding default ones

Is there any way of changing default color of checkboxes and radio buttons before and after click without hiding and replacing default ones?

change html label background if checkbox is checked with plain css [duplicate]

How should the label's background for a checked checkbox be set in plain CSS? I got something that changes the background of the Ballet Box span, but I need the complete label to have this color without javascript.

I tried several combinations of label, input-box-selectors and styling the checkbox in another way.

See https://jsfiddle.net/7haorjcs/ for running CSSE.

Thanks for all suggestions. :-)

<html>
<head>
  <meta charset="UTF-8">
  <title>CheckboxTest</title>
  <style type="text/css">
body {
  margin: 20px;
  background: #FFFFFF;
  font-family: 'Trebuchet MS', 'Open Sans', sans-serif;
  color: #000000;
}
.cbx {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #ff6633;
  cursor: pointer;
  border: 2px solid;
  border-color: #002080;
  border-radius: 4px;
  padding: 2px 5px;
  display: inline-block;
  font-weight: bold;
  font-size: x-large;
}
.cbx:hover {
  color: #000000;
  background-color: #ffe066;
}
.cbxcm:checked + span { /* the span changes color, but not the complete label */
  background-color: #336600;
}
.cbxcm:checked:hover + span { /* the span changes color, but not the complete label */
  background-color: #ffe066;
}
.cbxcm {
  display: none;
}
.cbxcm + span {
  color: #ffd633;
}
.cbxcm + span:after {
  content: "\2610";
  font-style: bold;
  font-size: x-large;
  margin-left: 10px;
}
.cbxcm:hover + span {
  color: #005500;
}
.cbxcm:checked + span {
  color: #66ff33;
}
.cbxcm:checked + span:after {
  content: "\2612";
}
.cbxcm:checked:hover + span:after {
  color: #555555;
}
  </style>
</head>
<body>
<div class="outer">
  <div class="content" id="content">
  <label class="cbx">Text
    <input class="cbxcm" type="checkbox"><span></span></label>
  <br><br>
  <label class="cbx">Some more Text
    <input class="cbxcm" type="checkbox"><span></span></label>
  <br><br>
  <label class="cbx">Different
    <input class="cbxcm" type="checkbox" checked="checked"><span></span></label>
  </div><br>
  <div class="footer">
    <div id="console"></div>
  </div>
</div>
</body>
</html>

How can I get the values of checked checkbox inside the jTable and calculate they average in Java

I am trying to create a rating prototype in java, were a use can rate the aspect by clicking the checkbox. I am trying to capture the values for selected checkbox inside the table and calculate they average. And I want the user to be able to select only one checkbox in each row.

See the image to get a clear idea of what I mean

enter code here

    int rating;
    int checkBox;
    int average = 0;
    
    for(int a=0; a<jTable1.getRowCount(); a++){
        
        Boolean isChecked = Boolean.valueOf(jTable1.getValueAt(a, +1).toString());
            if (isChecked) {
                rating =+1;
            //get the values of the columns you need.
            } else {
            System.out.printf("Row %s is not checked \n", a);
            
            
}
        for(int c=1; c<jTable1.getColumnCount(); c++){
            
            
        
            //if( jTable1.getValueAt(c, 1).isSelected()==true){
               //rating = 1;
            //}
        }  
    }

See the image here to have a clear idea of what i am saying

Not able to remove check from select all checkbox Ng2 smart table

As you see from the image, when I deselect any row individually, the select all checkbox in the header remains checked.

Is there any solution?

Javascript checkboxes with the same class name

I would like to do when I check one checkbox the other checkboxes get disabled not the checked checkbox.

let checkbox = document.querySelector(".checkbox");

function check() {

    if (checkbox.checked) {
    checkbox.disabled = "true"
} 

}

 <input onclick="check()" class="checkbox" type="checkbox">
  <input onclick="check()" class="checkbox" type="checkbox">
   <input onclick="check()" class="checkbox" type="checkbox">
    <input onclick="check()" class="checkbox" type="checkbox">

jQuery checkbox validation in same class

I wonder if I can validate checkbox can be selected with only one option based on each question like the radio button. However, I am using the same class for all checkboxes even though they have different titles.

Is it possible to validate each question rather than validating with the class name? Here is the HTML and Jquery code below. Thanks in advance.

--- HTML ---

    <div><label class="k-checkbox-label" >Question 1</label> 
      <input type="checkbox" id="q1_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q1_no" class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>
    <div><label class="k-checkbox-label" >Question 2</label> 
      <input type="checkbox" id="q2_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q2_no" class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>
     <div><label class="k-checkbox-label" >Question 3</label> 
      <input type="checkbox" id="q3_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q3_no"class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>
     <div><label class="k-checkbox-label" >Question 4</label> 
      <input type="checkbox" id="q4_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q4_no" class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>

--- code ---

    $('input.k-checkbox').on('change', function() {
        $('input.k-checkbox').not(this).prop('checked', false);  
    });

WPF C# - multiple CheckBox controls in a DataGrid cell

In the DataGrid control I would like to add a column in which each cell would contain a list of checkbox controls (for each cell there can be a different number of such checkboxes with different descriptions). I don't know how to define such a column with an undefined number of checkboxes in a cell.

Please help.

Kivy: action when unclick a checkbox

I am creating a mobile app as questionary, my questions are in checkboxes. functions in my app make a list of answers and when the user choose certain answer it writes value into list.

Sometimes they can choose wrong answer and they want to repair their choice. i want to add function when they unclick a checkbox to delete last value in list

in .py

class test:

    def __init__(self, testovatel, test_v=[], ):
        self.testovatel = testovatel
        self.test_v = test_v

    def mistake(self):
        del self.test_v [len(self.test_v)-1]


class TestScreenV(Screen):
    
    jarka= test("jarka")

    def bad(self):
        if self.ids.check_test.active == False:
            self.jarka.mistake()

    def d_plus(self):
        self.jarka.test_v += ("d",)

    def i_plus(self):
        self.jarka.test_v += ('i',)

    def s_plus(self):
        self.jarka.test_v +=('s',)

    def k_plus(self):
        self.jarka.test_v +=('k',)

in .kv

<TestConfirm>
    on_release: root.set_icon(check_test)
    CheckboxLeftWidget:
        id: check_test 
<TestScreenV>:
    OneLineListItem:
        text: "1/24 "
                            
    TestConfirm:
        text: "bla"
        on_press: 
            root.d_plus()
            root.bad()
    TestConfirm:
        text: "bla"
        on_press: 
            root.k_plus()
            root.bad()
    TestConfirm:
        text: "bla"
        on_press: 
            root.s_plus()
            root.bad()
    TestConfirm:
        text: "bla"
        on_press: 
            root.i_plus()
            root.bad()

Currently I am working on React(Frontend Part), I have bookmark folder list, users able to select one or more bookmark files from the above list

Actual UI:- Expecting UI:-

<BlockUI tag="div" blocking={foldersLoading}>
           <main id="candidates-list-container">
           {/* ref={(ref) => { mainBottom = ref; }}  */}
           <ul>
           {folders.map((folder) => {
           const folderID = folder.id;
           console.log(folderID);
           const folderName = folder.name;
           console.log(folderName);
           return (
             <li key={folderID}>
                <button
                  type="button"
                  className={`job ${
                     selectedFolders.indexOf(folderID) > -1 ? 'selected' : ''
                  }`}
                  disabled={
                     bookmarkedCandidate.is_bookmarked
                     && selectedFolders.indexOf(folderID) === -1
                  }
                  onClick={() => {
                     selectFolder(folderID, folderName);
                  }}
                 >
                 <h2
                   className={`${
                      selectedFolders.indexOf(folderID) > -1 ? 'selected' : ''
                      }`}
                 >
                 <input type="checkbox" className="jss1042" value="" />
                    {folderName}
                 </h2>
               </button>
             </li>
            );
           })}
         </ul>
        </main>
        </BlockUI>

In the image, Selected bookmark files are there. My question is currently, how can I show checkboxes instead of that folder icon () so that the user can select the check box. This is my code it doesn't work for me. Please help me, guys.

How to get checkbox values insert into multiple rows?

My code is inserting the checkbox values into one row - i would like to have the code insert multiple rows depending on number of checkboxes checked. Can any one tell me what im doing wrong?

I have tried implode, explode - but haven't had any succes so far. Please can any one tell me what i'm doing wrong. Hope fulle by modifing my code bellow...? Thx

  <?php
    // Initialize the session
    session_start();

    // Include config file
    require_once "assets/scripts/config.php";

    $param_uniqid = $_SESSION['uniqid']; 
    $param_company = $_SESSION['company']; 
    $param_vat = $_SESSION['vat']; 
    $param_username = $_SESSION['username']; 
 
    // Check if the user is logged in, if not then redirect him to 
    login page
    if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== 
    true){
    header("location: login.php");
    exit;
    }

    // Define variables and initialize with empty values
    $l_comps = $status_request = $user = $car = $uniqid = $company 
    = $vat = $username = "";
    $l_comps_err = $status_request_err = $user_err = $car_err = 
    $uniqid_err = "";
 
    // Processing form data when form is submitted
    if($_SERVER["REQUEST_METHOD"] == "POST"){

    {
    $l_compsarr = $_POST['l_comps'];
    $l_comps = implode(", ",$l_compsarr);
    } 

    {
    $status_request = ($_POST["status_request"]);
    }   

    // Validate user
    $input_user = trim($_POST["user"]);
    if(empty($input_user)){
        $user_err = "Venligst indtast en bruger.";
    } elseif(!filter_var($input_user, FILTER_VALIDATE_REGEXP, 
    array("options"=>array("regexp"=>"/^[0-9a-åA-Å\s]+$/")))){
        $user_err = "Bruger er ikke korrekt.";
    } else{
        $user = $input_user;
    }

    // Validate car
    $input_car = trim($_POST["car"]);
    if(empty($input_car)){
        $car_err = "Venligst indtast bilinformationer.";
    } elseif(!filter_var($input_car, FILTER_VALIDATE_REGEXP, 
    array("options"=>array("regexp"=>"/^[0-9a-åA-Å+&@#\/%-? 
    =~_|!:,.;\s]+$/")))){
        $car_err = "Bil er ikke korrekt.";
    } else{
        $car = $input_car;
    }
    
    // Validate uniqid
    $input_uniqid = trim($_POST["uniqid"]);
    if(empty($input_uniqid)){
        $uniqid_err = "Venligst indtast uniqid.";
    } elseif(!filter_var($input_uniqid, FILTER_VALIDATE_REGEXP, 
     array("options"=>array("regexp"=>"/^[0-9a-åA-Å+&@#\/%-? 
    =~_|!:,.;\s]+$/")))){
        $uniqid_err = "Uniqid er ikke korrekt.";
    } else{
        $uniqid = $input_uniqid;
    }
    
    
    // Check input errors before inserting in database
    if(empty($l_comps_err) && empty($status_request_err) && 
    empty($user_err) && empty($car_err) && empty($uniqid_err)){
        $sql = "INSERT INTO offer_requests (l_comps, 
    status_request, user, car, uniqid, company, vat, username) 
     VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
         
        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as 
    parameters
              mysqli_stmt_bind_param($stmt, "ssssssss", 
    $param_l_comps, $param_status_request, $param_user, 
    $param_car, $param_uniqid, $param_company, $param_vat, 
    $param_username);
            
            // Set parameters
    
            $param_l_comps = $l_comps;
            $param_status_request = $status_request;
            $param_user = $user;
            $param_car = $car;
            $param_uniqid = $uniqid;
    
            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
            
                // Records created successfully. Redirect to 
     landing page
                header("location: /offer_requests");
                exit();
            } else{
                echo "Something went wrong. Please try again 
     later.";
            }
        }
    }
    }

    ?>
 
    <!DOCTYPE HTML>

    <html>
    <head>
        <title>Fleets - få op til 3 tilbud på jeres næste 
    leasingbil</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, 
    initial-scale=1" />
        <link rel="stylesheet"
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="subpage">

        <!-- Header -->
            <header id="header">
                <div class="logo"><a href="index.html">Fleets.dk <span>3 tilbud på leasingbil</span></a></div>
                <a href="assets/scripts/logout.php" class="code">LOG UD</a>
            </header>

    <!-- content -->
            <div class="box">
                <div class="inner">
                    <div class="content">
                            <h4>Hej, <b><?php echo htmlspecialchars($_SESSION["name"]); ?></b>.</h4>

                        <hr />

                        <ul class="nav nav-tabs">
                          <li role="presentation"><a href="/welcome">Profil</a></li>
                          <li role="presentation"><a href="/cars_employees">Biler</a></li>
                          <li role="presentation" class="active"><a href="offer_requests">Tilbud</a></li>
                        </ul>
                            
                            <div class="table-wrapper">
                            <h4 class="pull-left">Oprettede tilbud</h4>
                            
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th class="hidden"><b>#</b></th>
                            <th><b>Bil</b></th>
                            <th><b>Leasingselskab(er)</b></th>
                            <?php
                            // Include config file
                            require_once "assets/scripts/config.php";
                            
                            // Attempt select query execution
                             $sql = "SELECT * FROM offer_requests WHERE username = '" . ($_SESSION["username"]) . "'";
                            if($result = mysqli_query($link, $sql)){
                                if(mysqli_num_rows($result) > 0){

                                                echo "<th></th>";
                                            echo "</tr>";
                                        while($row = mysqli_fetch_array($result)){
                                            echo "<tr>";
                                                echo "<th class='hidden'>" . $row['uniqid'] . "</th>";
                                                echo "<th>" . $row['car'] . "</th>";
                                                echo "<th>" . $row['l_comps'] . "</th>";
                                                echo "<th>";
                                                    echo "<a href='read_request.php?uniqid=". $row['uniqid'] ."' title='Se tilbudsanmodning' data-toggle='tooltip'><span class='glyphicon glyphicon-eye-open'></span></a>";
                                                echo "</th>";
                                            echo "</tr>";
                                        }
                                    // Free result set
                                    mysqli_free_result($result);
                                } else{
                                    echo "</br></br><p><b><i>Ingen informationer fundet.</i></b></p>";
                                }
                            } else{
                                echo "ERROR: Was not able to execute $sql. " . mysqli_error($link);
                            }
                                                 echo "</tbody>";                            
                                    echo "</table>";
                            ?>
                            <p>
                                <div href="" class="button alt small" onclick="hideCreate()">OPRET NYT TILBUD</div>
                            </p>
                        </div>
 
                        <div id="create">    
                            <h4>1 - udfyld formularen</h4>
                                <form action="" method="post">
                                        <div class="6u 12u$(xsmall) <?php echo (!empty($car_err)) ? 'has-error' : ''; ?>">
                                            <label>Bil</label>
                                            <input type="text" name="car" class="6u 12u$(xsmall)" value="<?php echo $car; ?>">
                                            <span class="help-block"><?php echo $car_err;?></span>
                                        </div>
                                        <div class="6u 12u$(xsmall) <?php echo (!empty($user_err)) ? 'has-error' : ''; ?>">
                                            <label>Bruger</label>
                                            <input type="text" name="user" class="6u 12u$(xsmall)" value="<?php echo $user; ?>">
                                            <span class="help-block"><?php echo $user_err;?></span>
                                        </div>
                                            <input type="hidden" name="company" value="<?php echo $company; ?>">
                                            <input type="hidden" name="vat" value="<?php echo $vat; ?>">
                                            <input type="hidden" name="username" value="<?php echo $username; ?>">
                                            <input type="hidden" name="uniqid" value="<?php echo uniqid(); ?>" />
                                            <input type="hidden" name="status_request" value="AFVENTER TILBUD" />
                                            </br>

                                            <h4 class="pull-left">2 - vælg op til tre leasingselskaber</h4></br></br>
                                                <div class="table-wrapper">
                                                    <table class="table table-striped">
                                                        <thead>
                                                            <tr>
                                                                <th class="hidden"></th>
                                                                <th>Vælg</th>                                             
                                                                    <?php
                                                                        // Include config file
                                                                        require_once "assets/scripts/config.php";
                                                                        // Attempt select query execution
                                                                         $sql = "SELECT * FROM l_comp";
                                                                        if($result = mysqli_query($link, $sql)){
                                                                            if(mysqli_num_rows($result) > 0){
                                                          echo "<th>Leasingselskab</th>";                    
                                                      echo "</tr>";
                                                  echo "</thead>";
                                                  echo "<tbody>";
                                                                        while($row = mysqli_fetch_array($result)){
                                                          echo "<tr>";
                                                              echo "<th>";
                                                                  echo "<div class='6u 12u$(xsmall) <?php echo (!empty(" . $l_comp_err . ")) ? 'has-error' : ''; ?> 
                                                                        <input type='checkbox' id='" . $row['l_company'] . "' name='l_comps[]' <?php echo (in_array('l_comps', $var)?'checked':''); value='" . $row['l_company'] . "'?>
                                                                        <label for='" . $row['l_company'] . "'></label>
                                                                        <span class='help-block'><?php echo " . $l_comp_err. ";?></span>";
                                                              echo "</th>";                                            
                                                              echo "<th>" . $row['l_company'] . "</th>";
                                                          echo "</tr>";}
                                                                        // Free result set
                                                                        mysqli_free_result($result);
                                                                        } else{
                                                                        echo "</br></br><p><b><i>Ingen informationer fundet.</i></b></p>";
                                                                        }
                                                                        } else{
                                                                        echo "ERROR: Was not able to execute $sql. " . mysqli_error($link);
                                                                        }
                                                                        echo "</tbody>";                            
                                              echo "</table>";
                                                                        ?>

                                                                <input type="submit" class="button alt small" value="OPRET NYT TILBUD">
                                                                <a href="/offer_requests" class="button alt small">FORTRYD</a>

                                </form>
                        </div>
                    </div>
                </div>
            </div>

        <!-- Footer -->
            <footer id="footer" class="wrapper">
                <div class="inner">
                    <div class="copyright">
                        &copy; Fleets.dk - for virksomheder </br> 
                        <a href="mailto: kontakt@fleets.dk">KONTAKT OS</a> 
                    </div>
                </div>
            </footer>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.scrolly.min.js"></script>
            <script src="assets/js/jquery.scrollex.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>
            <script src="assets/js/overlay_create.js"></script>
            <script src="assets/js/overlay_login.js"></script>

    </body>
</html>

Sending the value I selected with checkbox into ajax

When I use option select, I use the code;

var selNameGroup = document.getElementById("selectedNameGroup ");
selectedNameGroup = selNameGroup .options[selNameGroup .selectedIndex].text;
var docNameGroupIdId = selNameGroup .value;

and I pass into dynamic data.

if (selNameGroup != "" || selNameGroup !== "Choose Name Group") {
//NameGroupId is The request value returned from the model.
dynamicData["NameGroupId"] = docNameGroupIdId ;
  }

Likewise, how do I do for the checkbox?

How to use setState in FutureBuilder properly?

I'm making a page which contains some dropboxes which interact each other and a Futurebuilder wrapped ListView.

I'm calling 'setState' when Dropbox changes and checkbox is clicked. However, because of the setState in checkbox's onChanged, the Futurebuilder keeps being called and the ListView is rebuilded. Therefore the entire Listview is blinkning when checkbox is clicked like the video below.

I want to keep the Listview and update only checkbox. Is there anyone who can help me? Thank you.

The full code is

class _StatefulDialogWidgetState extends State<StatefulDialogWidget> {
  ....   

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Dropdown's
        Dropdown(0, widget.ReceiveArgs, _lListOfDepthList),
        Dropdown(1, widget.ReceiveArgs, _lListOfDepthList),
        Dropdown(2, widget.ReceiveArgs, _lListOfDepthList),
        Dropdown(3, widget.ReceiveArgs, _lListOfDepthList),
        Dropdown(4, widget.ReceiveArgs, _lListOfDepthList),
        
        // Listview with FutureBuilder
        AptListview(),
      ],
    );
  }

ListView Code

Widget AptListview() {
    return FutureBuilder<List<String>>(
        future: AptNameListView(widget.ReceiveArgs),
        builder: (context, snapshot) {
          if (_bLastDepth == false) {
            return Text("Select Address");
          } else {
            if (snapshot.hasData == false || snapshot.data.isEmpty == true) {
              return CircularProgressIndicator();
            } else {
              return Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: _AptNameList.length,
                  itemBuilder: (context, index) {
                    //return new Text("${_AptName[index]}");
                    return CheckboxListTile(
                      title: Text(_AptNameList[index]),
                      value: _isAptChecked[index],
                      onChanged: (value) {
                        setState(() {                   //  SetState in FutureBuilder
                          _isAptChecked[index] = value;                              
                        });
                      },
                    );
                  },
                ),
              );
            }
          }
        });
  }

Dropdown Code

Widget Dropdown(int nDepth, ArgumentClass ReceiveArgs,
      List<List<String>> ListOfDepthList) {
    String _Value = "";
    List<DropdownMenuItem<String>> _itemList = null;
    if (ListOfDepthList.length <= nDepth) {
      _Value = "";
      _itemList = null;
    } else {
      _Value = _SelectedAddressList[nDepth];
      _itemList = GetMainItem(ListOfDepthList[nDepth]);
    }
    return DropdownButton(
        value: _Value,
        items: _itemList,
        onChanged: (value) {
          if (value.compareTo(GlobalObject().startMessage) != 0) {
            setState(() {
              .....
              // setState in Dropdown
            });
          }
        });
  }

Check if a submitted checkbox was checked or not in WooCommerce

In WooCommerce, I am trying to check if submitted checkbox is checked or not in the code below:

add_filter('kco_wc_api_request_args', 'krokedil_add_required_checkbox');

function krokedil_add_required_checkbox( $create ) {
    $create['options']['additional_checkbox']['text'] = 'Prenumerera på nyhetsbrevet';
    $create['options']['additional_checkbox']['checked'] = true;
    $create['options']['additional_checkbox']['required'] = false;
    return $create;
}

add_action( 'kco_wc_confirm_klarna_order', 'my_add_kco_order_data', 10, 2 );
function my_add_kco_order_data($order_id, $klarna_order ) {
    if( $klarna_order['additional_checkbox']['checked'] ) {
        add_post_meta( $order_id, 'mailchimp_woocommerce_is_subscribed', 1 );
    } else {
        add_post_meta( $order_id, 'mailchimp_woocommerce_is_subscribed', 0 );
    }   
}

But I can't get it to work. Feels like I've tried all combinations.

Any suggestions?

reset/uncheck checkbox how to reset value in jquery?

I am trying to have a checklist with 4 elements A B C D (value=1 each) and an element E (value=3) to create a "discount" if the user selects this. The value is used as multiplier to create a quote based on other selected criteria.. So I need this to be A+B+C+D=4 but if I press E they all uncheck and the value becomes 3.. however...

With the function I managed to uncheck the boxes but seems like the value won't reset?

    function totalIt() {


        var input = document.getElementsByName("type");
      var multiplier = 0;
      for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
          multiplier += parseFloat(input[i].value);
        }
      }

        $('#family').on('click', function() {
    $('.font').not(this).removeAttr('checked')
var multiplier = 3;
});


    console.log(multiplier)

};

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="scroll.js"></script>

    <style>
        .column2{
            display: flex;
            flex-wrap: wrap;

        }
        .theForm{
            width: 30%;}
    </style>
</head>

<!-- BODY  -->


<body>
            <form action="" class="theForm">
             <fieldset>
                     <legend>
                             SELECT 
                     </legend>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p1" onclick="totalIt()"/>
                             Thin
                     </label>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p2" onclick="totalIt()"/>
                             Regular
                     </label>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p3" onclick="totalIt()"/>
                             Medium
                     </label>
                     <label><br>
                             <input class="font"name="type" value="1" type="checkbox" id="p4" onclick="totalIt()"/>
                             Bold
                     </label>
                     <label><br>
                             <input  id="family" name="type" value="3" type="checkbox" id="p5" onclick="totalIt()"/>
                             Family
                     </label>

             </fieldset>

        </form>




    

</body>

</html>

Slidable widget taking too much size flutter

I'm working on a todo App and I display my todos with some kinda cards and I'm using the slidable widget to modify or delete them. The problem is that the left slide takes too much space and is above my checkbox. That's a picture of it:

I don't really know why it's like that so if you have some idea please tell me.

 return ClipRRect(
  borderRadius : BorderRadius.circular(15),
  child: Slidable(
    actionPane: SlidableDrawerActionPane(),
    key: Key(widget.todo.id),
    actions: [
      IconSlideAction(
        color: Colors.green,
        onTap: () {},
        caption: 'Edit',
        icon: Icons.edit,
      )
    ],
    secondaryActions: [
      IconSlideAction(
        color: Colors.red,
        caption: 'Delete',
        onTap: () {},
        icon: Icons.delete,
      )
    ],

submit is enabled only if first checkbox is checked [duplicate]

I want to enable submit button when at least one of the checkboxes (which is inside a for loop) is checked.

Currently what happens is, the submit button is enabled only when the first checkbox is checked, if I check the second or third checkbox without selecting the first one it won't enable the submit button.

function EnableSubmitBtn() {

  if (document.getElementsByName("AccountChecked").checked == false) {
    document.getElementById("btnSubmit").disabled = true;
  } else {
    if (document.getElementById("fileSupport").files.length != 0) {
      document.getElementById("btnSubmit").disabled = false;
    }
  }
}

<td>
  <input onclick="EnableSubmitBtn()" name="AccountChecked" id="chkBoxAccNo" type="checkbox" value="@item.accnt_no" style="background:transparent;color:white" />
</td>

WPF Checkbox Custom Style Check disappeared

Maybe this is redundant but I could not find anything. I probably am missing something simple.

The checkbox in question is set in the codebehind on a selection event

  chkEmpOK.IsChecked = _cfgUsr.IsEnabled;

This worked as desired until I tried to add a custom style. Now the checkbox displays the text but the image/glyph/box part of the checkbox does not display. I am assuming I did something wrong in the style. Here is the control and style from the XAML:

<CheckBox x:Name="chkEmpOK" Grid.Column="2" Grid.Row="4" Margin="10,10,0,0">
    <CheckBox.Style>
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Content" Value="Click Me to Enable"/>
                                <Setter Property="Foreground" Value="Red"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content" Value="To remove access- click me"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </CheckBox.Style>
</CheckBox>

This is what it looks like

Hopefully I am missing something simple. Does it have anything to do with it inheriting from ToggleButton?

Advanced Custom Fields - Create a 'Room' options list with multiple sections that is maintained from the Options tab

I have a list of “Room” options set up in the Options tab. I want the client to be able to manage the list from Options and then the list to appear on the Rooms page so they can select which options are available for that particular room. If the client update the main list of options form the Options page, they would need to update on the Rooms page.

I have a Repeater called “Room features / room_features” already set up and is working as expected on the Options page.

What is shown in the Options page:

Repeater:
Row 1:
Text – Title – ‘Beds’<--- This is basically a label for that section and is only editable from the Options page.
Repeater – Options: 2 beds, 3 beds etc…
Row 2:
Text – Title – ‘Size’<--- This is basically a label for that section and is only editable from the Options page.
Repeater – Options: 340 Square Feet , 640 Square Feet etc…

What I would like to show on the Rooms page:

Group:
Set 1: each set built from the Repeater
Visibility – Yes/No
Title – Beds – Not editable
Options – Checkboxes created by the Repeater

Set 2: each set built from the Repeater
Visibility – Yes/No
Title – Beds – Not editable
Options – Checkboxes created by the Repeater

Below is the code I have so far. The rows are being built and the title is being populated. "var_dump($options_value);" is outputting the repeater values that would create the checkboxes but I can't figure out how to add the choices. key=field_602ad24de4cfd is the repeater on the Rooms page.

function my_acf_set_repeater( $value, $post_id, $field ){
    
    $value = array();    
    
    // this is the main repeater from Options
    $settings_values = get_field('room_features','option');
    
    foreach( $settings_values as $settings_value ){
        // This is setting the title
        $value[]= array('field_602c2e8c5f28f' => $settings_value['title']);
        
        // All of the options
        $options_values =  $settings_value['items'];

        foreach( $options_values as $options_value ){
            var_dump($options_value);
        }
    }

    return $value;
}

add_filter('acf/load_value/key=field_602ad24de4cfd', 'my_acf_set_repeater', 10, 3);

Is the 1st image below you can see the 1st 3 arrays are what's in row 1 and the other 2 are in row 2. That is what is showing on the Rooms page.

The second image is how the Options page looks now.

Is this even possible? Thanks in advance!!!