How to display error message when user pick more than 1 day then click the checkbox for halfday?

I have two datepicker which are datepickerFrom and datepickerto. I want to show an error message when user pick more than 1 day and check the half day checkbox then click button submit it will show and error message.

For example : A pick 1/6/2022 - 3/6/2022, then A click check box for half day. When A clicked the submit button it'll show an error message like 'Sorry, You can't pick more than 1 date for half day!'

Here is my code for my checking error

Private Function ErrorFree() As Boolean 

If datepickerFrom.Date > datepickerto.Date Then 
   If chkHalfDay.Checked = True Then 
       DisplayMessage("error", "ERROR", "Sorry, You can't pick more than 1 date for half day!")
   Return False
   Exit Function
   End If
End If
Return True
End Function

React - How to select all checkboxes based on one without using the map function

I created a simple form in React that displays the submitted data in the console. I created three checkboxes, the first one to mark the two below, and the other two regarding data processing. Is there a way to change the state of two checkboxes by clicking only the "Accept All" checkbox?

I found solutions that worked on checkboxes mapped from array, while my checkboxes are simply written in the code. I can't understand how I can target each of the two checkboxes that I need to make change in based on "Accept all" checkbox

Here is the snippet of code, I am using styled components.

import { useState } from 'react';

const Contact = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
  <Processing>
    <Label>
      <Checkbox type='checkbox' />
      <CheckboxText>Accept all</CheckboxText>
    </Label>
    <Label>
      <Checkbox type='checkbox' defaultChecked={false} required />
      <CheckboxText>I agree to the processing my data</CheckboxText>
    </Label>
    <Label>
      <Checkbox type='checkbox' defaultChecked={false} required />
      <CheckboxText>RODO processing my data by company</CheckboxText>
    </Label>
  </Processing>
  );
};

export default Contact;

Selenium (Java) and seemingly unsolvable "element not interactable"

I've run into a Selenium element not interactable problem that I cannot seem to solve. The page is an Angular page, if that's relevant. The element is a checkbox, with a label (among other things).

The markup in question (of course, part of a larger page - and I've removed some irrelevant styling data etc.):

<div class="hb-grid hb-grid--gapSM">
 <div data-e2e-selector="saksjournal-checkbox-style" style="visibility: visible;">
  <input type="checkbox" data-e2e-selector="saksjournal-checkbox" id="erArkivert-0">
   <div class="hb-label">
    <label data-e2e-selector="saksjournal-checkbox-lbl" for="erArkivert-0" aria-describedby="journalPostArkiverStatus-0"></label>
   </div>
  </div>
  <div class="hb-cell" id="journalPostArkiverStatus-0">
   <div class="haster ng-star-inserted">
    <div class="ng-star-inserted">Ikke arkivert</div>
    <div class="ng-star-inserted">
     <a href="#" id="lastNedArkivStatus2" class="hb-tekst--s">Last ned journalpost</a> og kryss av når du har arkivert manuelt 
    </div>
   </div>
  </div>
 </div>

After simplyfying the Java/Selenium code for troubleshooting, this is what I've tried to be able to click the checkbox:

driver.findElement(By.cssSelector("label[for='erArkivert-0']")).click();

and

driver.findElement(By.cssSelector("[data-e2e-selector='saksjournal-checkbox-lbl']")).click();

and

driver.findElement(By.cssSelector("[data-e2e-selector='saksjournal-checkbox']")).click();

Also, of course, the ID for the last element (which shouldn't make any difference).

All these result in "element not interactable". Before, I used to be able to work around this thing by doing exactly what I'm doing above - clicking the instead of the checkbox element. But this doesn't work anymore.

Any ideas?

Add/remove items from state when working with multiple checkboxes not working [duplicate]

I have a list of checkboxes and when one it selected, I want the associated ID to be added to a state object and when its unchecked, the ID should be removed from the state object.

Currently, the state object only updates when a second checkbox is selected (and state only contains the first checkbox) -- aka its always 1 checkbox behind. Its then the opposite when unchecking -- if 3 boxes are checked, state shows 4 boxes selected.

I'm a super new dev so I'm sure this is incredibly simple, any help would be much appreciated :)

const [checkedState, setCheckedState] = useState(new Array(20).fill(false));
const [checkedPlaylists, setCheckedPlaylists] = useState({});

const handleChange = (position, id) => {
  const updatedCheckedState = checkedState.map((item, index) =>
    index === position ? !item : item
  );

  setCheckedState(updatedCheckedState);

  if (checkedState[position] === false) {
    setCheckedPlaylists(prev => {
      return {
        ...prev,
        [position]: id
      }
    })
  } else {
    setCheckedPlaylists(prev => {
      delete checkedPlaylists[position]
      return { ...prev }
    })
  }
}

Here's the jsx

return (
<>
  <h3>Select Playlists</h3>
  <form onSubmit={handleSubmit}>
    <ul className='playlists-list' style=>
      {playlists?.items.map((playlist, index) => {
        return (
          <li key={index}>
            <div className='playlists-list-item'>
              <input 
                type='checkbox'
                id={`custom-checkbox-${index}`}
                name={playlist.name}
                value={playlist.name}
                checked={checkedState[index]}
                onChange={() => handleChange(index, playlist.id)}
              />
              <label htmlFor={`custom-checkbox-${index}`}>{playlist.name}</label>
            </div>
          </li>
        )
      })}
    </ul>
    <div>
      <button className='submit-btn' type='submit'>Submit</button>
    </div>
  </form>
  <TopSongs playlists={playlists} />
</>

)

How to set background color for react-native-checkbox library

How can i set the background-color for checkboxes library https://github.com/react-native-checkbox/react-native-checkbox?

I use iOS as a platform.

Thank you for your help!

Is there a way to do a different query if checkbox is unchecked

Here is what I have so far. My issue is with the if statement.

echo "<div>
        <input type='checkbox' id='retired' name='retired' checked>
        <label for='retired'>Hide Retired Systems</label>
      </div>";
$sql = 'SELECT * FROM db WHERE `Physical Location` != "RETIRED"';
$sql_all = 'SELECT * FROM db';

if (checkbox retired = True):
   showDBtable($sql);
else:
   showDBtable($sql_all);

I understand I should be using JavaScript but is there any way to do this via PHP/HTML. I don't mind if the whole page reloads. I'm thinking I have to update the POST var on the checkbox click so then when the page reloads, it knows which query to choose.

How to get the value of a table field when checking and unchecking a checkbox

So, I have this html table, with a checkbox as the last column (id = reconciled), I also have an id field in the first column (id = aopayid) , how do I check the last column and get the first column value, I also want to uncheck and get the first column value - they must be as I click each checkbox and I need the check and uncheck to be separate as I will run a separate script for each.

I have found a few solutions, but they all seem to loop through the table and give the value of each that are checked, or unchecked. Hope that makes sense.

<table id="example" class="display" style="width:100%;display:none" >
            <thead>
                <tr>
                <th >AoID</th>
                <th>Merchant</th>
                <th >Reference</th>
                <th  >Date</th>
                <th style=" text-align: right">Amount</th>
                <th >Status</th>
                <th >Edit</th>     
                <th >Complete</th>     
                </tr>
            </thead>
            <tbody>
                <tr>
                <td name="aopayid" id="aopayid" ></td>
                <td></td>
                <td></td>
                <td><span class="date"><?php echo substr($transaction->created,0,10); ?></td>
                <td style=" text-align: right"><?php echo number_format($transaction->amount,2); ?></td>
                <td><span class="badge "></span></td>
                <td><input type="button" class="edit" name="edit" value="Edit" ></td>
                <td><input type="checkbox" class="reconciled" name="reconciled" id="reconciled" value = 'yes'  ></td>
            </tr>
          </tbody>
 </table>

The code that I have is as follows , but it does not give the value when unchecking

$(document).on("click", "#example .reconciled", function () {

 //Reference the Table.
  var grid = document.getElementById("example");
 
 //Reference the CheckBoxes in Table.
  var checkBoxes = grid.getElementsByTagName("INPUT");
  var message ;
  var checkedornot;

 //Loop through the CheckBoxes.
 for (var i = 0; i < checkBoxes.length; i++) {
     if (checkBoxes[i].checked) {
         var row = checkBoxes[i].parentNode.parentNode;
         message = row.cells[0].innerHTML;
         checkedornot = 'Yes';
     
     }
  }



 alert(message ); 


});

react-data-table-component How To Style Checkbox? Large Checkboxes To Small

I'm using react-data-table-component in my project to create a datatable.

However, the checkboxes are appearing too large.

After checking the docs, I found this page - Overidding Styling Using css-in-js with customStyles, and this example:

//  Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
    rows: {
        style: {
            minHeight: '72px', // override the row height
        },
    },
    headCells: {
        style: {
            paddingLeft: '8px', // override the cell padding for head cells
            paddingRight: '8px',
        },
    },
    cells: {
        style: {
            paddingLeft: '8px', // override the cell padding for data cells
            paddingRight: '8px',
        },
    },
};

There are no mentions on there about checkbox styling, so I attempt this:

    const customStyles = {
        checkbox: {
            style: {
                maxHeight: '18px',
                maxWidth: '18px',
            },
        },
  
    };

Unfortunately, the checkboxes remained large sized.

How do I solve this so it makes the checkboxes like the size shown in their example in the screenshots?

Screenshots.

How to show tooltip for checkbox in react final-form?

I am using react final-form in my web application. Currently checkbox is required so that I am getting default tooltip : Please check this checkbox if you want to proceed

I want to change this tooltip text. is it possible to pass any FieldProp?

<Form.Check
    name={name}
    checked={value}
    onChange={onChange}
    onClick={onClick}
    onBlur={(e) => onBlur(e)}
    required={required}
    disabled={disabled}
    type="checkbox"
    label={inputLabel}
    className={inputClassName || ''}
  />

Why is python telling me that there's a syntax error in a if statement?

I want to add to a sqlite database the values of a checkbox if that checkbox is clicked. I'm getting a syntax error at the colon of an if statement.

def addtoservices():
    sql = "INSERT INTO serviceoffered VALUES (?)"
    if(s12v.get()==1):
        c.execute(sql, [s12.cget("text")]
    if(s13v.get()==1):
        c.execute(sql, [s13.cget("text")]
    if(s14v.get()==1):
        c.execute(sql, [s14.cget("text")]
    if(s15v.get()==1):
        c.execute(sql, [s15.cget("text")]
    if(s16v.get()==1):
        c.execute(sql, [s16.cget("text")]
    if(s1ev.get()==1):
        c.execute(sql, [s1e.cget("text")]
    if(s2ev.get()==1):
        c.execute(sql, [s2e.cget("text")]
    if(s3ev.get()==1):
        c.execute(sql, [s3e.cget("text")]
    if(s4ev.get()==1):
        c.execute(sql, [s4e.cget("text")]
    if(s5ev.get()==1):
        c.execute(sql, [s5e.cget("text")]

How do you control the state of a radio button using a checkbox in Tkinter & Python

How do you only allow a radio button to be enabled if another checkbox is on. I included some code that I've been trying:

    if variable.get()==1:
        radiobutton.configure(state = NORMAL)
    elif variable.get()==0:
        radiobutton.configure(state = DISABLED)

Here is my code. I know that I could have simplified it, but try to ignore thatHere is my code. I know that I could have simplified it, but try to ignore thatHere is my code. I know that I could have simplified it, but try to ignore that (sorry for the repetition, it said too much code:

from tkinter import *
import os
from tkinter import ttk
import sqlite3
from tkinter import _setit
myfont=("Verdana")
window=Tk()
window.title("Endo Phone Assist")
#window.tk.call('wm', 'iconphoto', window._w, tk.PhotoImage(file='/path/to/ico/endoassistlogo.ico'))
window.geometry("760x660")
window.resizable(False, False)
myCanvas = Canvas(window, width = 800, height = 700, bg='#4d92e8')
myCanvas.pack()
######            Database Connection            ######



conn = sqlite3.connect("Practice Information Database.db")
c = conn.cursor()
######           Screen 1            ######
s12v = IntVar()
s13v=IntVar()
s14v=IntVar()
s15v=IntVar()
s16v=IntVar()
s17v = IntVar()
s18v=IntVar()
s19v=IntVar()
s110v=IntVar()
s111v=IntVar()
s112v=IntVar()
s113v=IntVar()
s114v=IntVar()
s115v=IntVar()
s116v=IntVar()
s12 = Checkbutton( text = "Root Canal", variable=s12v, bg='#4d92e8', font=(myfont, '12', 'italic'))
s13 = Checkbutton( text = "Retreatment", variable=s13v,bg='#4d92e8',font=(myfont, '12', 'italic'))
s14 = Checkbutton( text = "Endodontic Surgery", variable=s14v,bg='#4d92e8', font=(myfont, '12', 'italic'))
s15 = Checkbutton( text = "Y", variable=s15v,bg='#4d92e8', font=(myfont, '12', 'italic'))
s16 = Checkbutton( text = "Z", variable=s16v,bg='#4d92e8', font=(myfont, '12', 'italic'))
s17 = Radiobutton( text = "Yes", variable=s17v,value=1,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s17.configure(state = DISABLED)
s18 = Radiobutton( text = "Yes", variable=s18v,value=1,bg='#4d92e8',font=(myfont, '12', 'italic'))
#s18.configure(state = DISABLED)
s19 = Radiobutton( text = "Yes", variable=s19v,value=1,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s19.configure(state = DISABLED)
s110 = Radiobutton( text = "Yes", variable=s110v,value=1,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s110.configure(state = DISABLED)
s111 = Radiobutton( text = "Yes", variable=s111v,value=1,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s111.configure(state = DISABLED)
s112 = Radiobutton( text = "No", variable=s17v,value=2,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s112.configure(state = DISABLED)
s113 = Radiobutton( text = "No", variable=s18v,value=2,bg='#4d92e8',font=(myfont, '12', 'italic'))
#s113.configure(state = DISABLED)
s114 = Radiobutton( text = "No", variable=s19v,value=2,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s114.configure(state = DISABLED)
s115 = Radiobutton( text = "No", variable=s110v,value=2,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s115.configure(state = DISABLED)
s116 = Radiobutton( text = "No", variable=s111v,value=2,bg='#4d92e8', font=(myfont, '12', 'italic'))
#s116.configure(state = DISABLED)
#if s12v.get()==0:
    #s17.configure(state = NORMAL)
#elif s12v.get()==1:
     #s17.configure(state = DISABLED)
def screen1():
    myCanvas.create_text(300, 50, text="Welcome to Endo Phone Assist! First, Tell use a little about your practice:", fill="Black", font=(myfont, '13','bold'))
    myCanvas.create_text(137, 125, text="What services do you offer?", fill="Black", font=(myfont, '11','bold'))
    myCanvas.create_text(325, 125, text="Does it require a consult?", fill="Black", font=(myfont, '11','bold'))
    s12.place(x=130,y=175)
    myCanvas.create_text(280, 237, text="(Previously Treated Tooth)", fill="Black", font=(myfont, '7','bold'))
    s13.place(x=130,y=225)
    s14.place(x=130,y=275)
    s15.place(x=130,y=325)
    s16.place(x=130,y=375)
    s17.place(x=360,y=175)
    s18.place(x=360,y=225)
    s19.place(x=360,y=275)
    s110.place(x=360,y=325)
    s111.place(x=360,y=375)
    s112.place(x=430,y=175)
    s113.place(x=430,y=225)
    s114.place(x=430,y=275)
    s115.place(x=430,y=325)
    s116.place(x=430,y=375)
    backbtn1.place(x=-100, y=-100)
def goback1():
    myCanvas.create_text(300, 50, text="Welcome to Endo Phone Assist! First, Tell use a little about your practice:", fill="Black", font=(myfont, '13','bold'))
    myCanvas.create_text(137, 125, text="What services do you offer?", fill="Black", font=(myfont, '11','bold'))
    myCanvas.create_text(325, 125, text="Does it require a consult?", fill="Black", font=(myfont, '11','bold'))
    s12.place(x=130,y=175)
    myCanvas.create_text(280, 237, text="(Previously Treated Tooth)", fill="Black", font=(myfont, '7','bold'))
    s13.place(x=130,y=225)
    s14.place(x=130,y=275)
    s15.place(x=130,y=325)
    s16.place(x=130,y=375)
    s17.place(x=360,y=175)
    s18.place(x=360,y=225)
    s19.place(x=360,y=275)
    s110.place(x=360,y=325)
    s111.place(x=360,y=375)
    s112.place(x=430,y=175)
    s113.place(x=430,y=225)
    s114.place(x=430,y=275)
    s115.place(x=430,y=325)
    s116.place(x=430,y=375)
    backbtn1.place(x=1000,y=5500)
    button1to2.place(x=600,y=550)
######           Screen 2            ######
def screen2():
    myCanvas.delete('all')
    s12.place(x=-100,y=-100)
    s13.place(x=-100,y=-100)
    s14.place(x=-100,y=-100)
    s15.place(x=-100,y=-100)
    s16.place(x=-100,y=-100)
    s17.place(x=-100,y=-100)
    s18.place(x=-100,y=-100)
    s19.place(x=-100,y=-100)
    s110.place(x=-100,y=-100)
    s111.place(x=-100,y=-100)
    s112.place(x=-100,y=-100)
    s113.place(x=-100,y=-100)
    s114.place(x=-100,y=-100)
    s115.place(x=-100,y=-100)
    s116.place(x=-100,y=-100)
    button1to2.place(x=-100,y=-100)
    backbtn1.place(x=100, y=550)
def updateradiobtn():
    if s12v.get()==0:
        s17.configure(state = DISABLED)
    elif s12v.get()==1:
        s17.configure(state = ENABLED)
button1to2=Button(text='Next', command=screen2, bd=0,highlightbackground='#4d92e8')
button1to2.place(x=600,y=550)
backbtn1=Button(text='Go Back', command=goback1, bd=0,highlightbackground='#4d92e8')
updateradiobtn()
screen1()
window.mainloop()

SpringBoot. Controller does not read CheckBox values

I have Form with CheckBoxes on my index.html.

            <form name="formCheckBox" id="formCheckBox" action="/filter" method="POST">     
                <div>
                  <input type="checkbox" id="onechange" name="onechange" onclick="this.form.submit();">
                  <label for="onechange">one change</label>
                </div>            
                <div>
                  <input type="checkbox" id="nochanges" name="nochanges" onclick="this.form.submit();">
                  <label for="nochanges">no changes</label>
                </div>
</form>

I'm trying to read values of both Checkboxes (on or off) in Controller after clicking on any Checkbox (need a page update). And feels like It does not go to Controller at all. So, how to read it in Controller and How to send those values back on my new page filter.html?

Controller:

@PostMapping("/filter")
    public String checkBoxAction (@RequestParam("onechange") String onechange,
                                  @RequestParam("nochange") String nochange){
        System.out.println(onechange);
        System.out.println(nochange);
        return ("/filter");
    }

Checkbox form on Next.js and Typescript project

I am working on a projet with Next.js and Typescript. I have a form and it is the first time working with Typescript and the checkbox type. I am having issues trying to get all the values of the checkboxes, adding if it is true or deleting if it is false. Also, I tried the spread operator but it breaks the code. This is the code:

States:

const [callTime, setCallTime] = useState<any>('');
const [isChecked, setIsChecked] = useState<boolean>(false);

Array:

const preferredTime = [
  {
    time: 'Before 9am',
  },
  {
    time: '9am to 12pm',
  },
  {
    time: '12pm to 3pm',
  },
  {
    time: 'After 3pm',
  },
];

Handler:

const onChangeCheckBox = (e: { target: { checked: boolean; value: React.SetStateAction<string>; }; }) => {
    setIsChecked(() => e.target.checked);
    // setIsChecked(() => !isChecked);
    setCallTime(e.target.value)
    console.log('radio', e.target.value);
    console.log('radio', e.target.checked);
}

return:

                    <p>Preferred call back time</p>
                    <div className={styles.radioGroup}>
                      {preferredTime.map((item, index) => (
                        <div key={index} className={styles.radios}>
                          <label htmlFor={item.time} className={styles.checkLabel}>{item.time}
                            <input
                                type="checkbox" 
                                value={item.time}
                                name="time" 
                                onChange={onChangeCheckBox}
                                id={item.time}
                                // checked={item.checked}
                                />
                            <span className={styles.checkSpan}></span>
                          </label>
                        </div>
                      ))}
                    </div>

This is a Codesanbox with the whole code:

How to Handle Multiple Checkboxes in typescript

I am trying to handle multiple checkboxes as follows:

sendFileNameToBackEnd = (filename: string[]) => {
    console.log(filename)
    this.vizsualizaForFileName(filename)
  }

render() {
  const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
      let listoffilename : Array<string> = []
      const target = event.currentTarget;
      const name = target.name;
      if(checked && name !== '')
        {
          listoffilename.push(name)
          this.setState({
            listoffilename1: listoffilename
          });
        }
        console.log(this.state.listoffilename1)
 };
 return (
 <DataList aria-label="Checkbox and action data list example" isCompact >
   { this.state.fileListData ?
     this.state.fileListData.map((fd) => 
     <DataListItem aria-labelledby="check-action-item1">
       <DataListItemRow>
         <DataListCheck 
           id="controlled-check"
           aria-labelledby="check-action-item" 
           isChecked={isChecked1}
           onChange={handleChange} 
           name={fd}/>
         <DataListItemCells
           dataListCells={[
            <DataListCell key="primary content">
              <span id="check-action-item1">{fd ? fd : "Loading..."}</span>
            </DataListCell>
           ]}
         />
       </DataListItemRow>
     </DataListItem>
     ): 
     <>
       <EmptyState>
        <Title headingLevel="h4" size="lg">Empty state</Title>
       </EmptyState>
     </>
  }
 </DataList>
<Button variant="primary" onClick={ () => {this.sendFileNameToBackEnd(this.state.listoffilename1)}}>Visualize</Button>
 );
}

In the above code, when I select any one checkbox, I can get its value, but when I choose multiple checkboxes after that, I am also getting only one value in an array.

In 'this.state.fileListData' I have n number of data and I am displaying a checkbox using a map and one button called 'Visualize'. When we select some of the values from the checkbox and click on the 'Visualize' button then I want to send all selected values to the backend for another operation.

When I select multiple checkboxes then it only sends one value in it not all selected values.

Guide me if I am doing something wrong.

Cannot select row programmatically inside a modal in ng2 smart table Angular

I have an ng2 smart table in my parent component and from this table i open a modal in which i display a second ng2 smart table So on the second table the row should be programmatically selected using this code,

let selectedElement: Element =  document.querySelectorAll('table tbody tr')
          .item(ind); 
         if (selectedElement) {
            let row: HTMLElement = selectedElement.querySelector('td') as HTMLElement;
            row.click();  
          }
       }

but that did not happen as expected, the code selects the row of parents table (table 1)

to resolve this problem i tried to get the second table by ID using this code :

let selectedElement2 : Element = document.querySelectorAll('#tableS table tbody tr').item(ind);

Unfortunately the code didn't find the tr

how solved "ValueError: Expected 2D array, got scalar array instead:"?

the image of interface the program enter image description here

from tkinter import *
from tkmacosx import Button
from tkinter import ttk
top = Tk('1000','1000')
top.title("Candidate Prediction")

top.configure(bg='light gray')

cvLabel=Label(top,text="Choose your department",bg='light gray').grid(row=0,column=0)

#Section selection
n = StringVar()
categorychoosen = ttk.Combobox(top, width = 27, textvariable = n)
  
# Adding combobox drop down list
categorychoosen['values'] = (' Computer Science', 
                          ' computer engineering',
                          ' Information Technology',
                          ' artificial intelligence',
                          ' cyber security',
                          ' computer networks',
                          ' Information Security',
                          ' Management Information Systems',
                          ' Software engineering',
                          ' data analysis',
                          ' Data Science')
  
categorychoosen.grid(row=1, column=2)
categorychoosen.current()


def model():
    import pandas as pd
    from sklearn.model_selection import train_test_split
    from sklearn.feature_extraction.text import TfidfVectorizer
    from scipy.sparse import hstack
    from sklearn.multiclass import OneVsRestClassifier
    from sklearn.neighbors import KNeighborsClassifier

    #Data
    resume = pd.read_csv(r'/Users/asma/Desktop/UpdatedResumeDataSet.csv')
    
    x = resume['Resume'].values
    y = resume['Category'].values
    #transform
    word = TfidfVectorizer(sublinear_tf=True, stop_words='english')
    word.fit(x)
    wordFeatures = word.transform(x)
    
    #KNN 
    model = KNeighborsClassifier(n_neighbors=5, metric= 'euclidean')
    
    model.fit(wordFeatures,y)
    x_test = n.get()
    y_pred = model.predict(x_test)
  
    #Result
    jobR = Label(top,text=str(y_pred) ,bg='light gray').grid(row=4,column=2)


but= Button(top,text="Start",bg='gray', command=model).grid(row=3,column=0)


job=Label(top,text="The Category is :",bg='light gray').grid(row=4,column=0)




top.mainloop()

The idea of the program is simple, I just want the user to choose the department, then the department chosen by the user is tested in the KNN algorithm with a set of resume data. Here is a picture of part of the resume data enter image description here

I want the output to be defining for me which of the categories the KNN process has chosen. For example, to exit one of the appropriate categories with the section that the user has chosen. But I have an error when I press the start button. What I understood is that the error existing in the model() function. the error is : ValueError: Expected 2D array, got scalar array instead: array= Information Technology. Reshape your data either using array.reshape(-1, 1) if your data has a single feature or array.reshape(1, -1) if it contains a single sample.

Material UI Dialog with checkbox acknowledgement before user can press the yes button to delete record

I am trying to implement a mui dialog box that contains a checkbox that the user has to check/acknowledge first before they can select the "Yes" option.

I currently have a working dialog box component that I am calling that doesn't have the checkbox, but I have added the checkbox part as follows:

export default function ConfirmCheckboxDialog(props) {
  const { confirmDialog, setConfirmDialog } = props;
  const classes = useStyles();

  const [checked, setChecked] = React.useState(false);  

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };  

  return (
    <Dialog open={confirmDialog.isOpen} classes=>
      <DialogTitle className={classes.dialogTitle}>
        <IconButton disableRipple className={classes.titleIcon} size="large">
          <NotListedLocationIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent className={classes.dialogContent}>
        <DialogContentText id="alert-dialog-description">
          <Typography variant="h6">{confirmDialog.title}</Typography>
          <FormControlLabel
          control={
            <Checkbox checked={checked} onChange={handleChange} />
          }
          label="Please acknowledge"
        />
        </DialogContentText>
      </DialogContent>
      <DialogActions className={classes.dialogAction}>
        <Controls.Button
          text="No"
          color="primary"
          onClick={() => setConfirmDialog({ ...confirmDialog, isOpen: false })}
        />
        <Controls.Button text="Yes" color="success" onClick={confirmDialog.onConfirm} />
      </DialogActions>
    </Dialog>
  );
}

Now I am calling this ConfirmCheckboxDialog component above from another component where I have set the following details:

const [confirmDialog, setConfirmDialog] = useState({ isOpen: false, title: '' });

I also have the following button:

<Button
  color="secondary"
  onClick={() => {
    setConfirmDialog({
     isOpen: true,
     title: `Delete?`,
     onConfirm: () => {
       console.log("Deleted......";
     }
   });
>
  {<span>Delete</span>}
</Button>

Based on the above ConfirmCheckboxDialog component, I'm not sure how to validate the checkbox against the Yes button as the only means of the onClick={confirmDialog.onConfirm} /> being set is if the checkbox is set/true

Any help would be good.

How to delete a field already filled in by clicking on a checkbox? (Angular)

Are you guys ok? In the photo below, when I click on the "I am Brazilian" checkbox, the field below filled with the "CPF" would completely not erase it. At the moment it only erases 1 digit which is the last one, how can I do it? Below is the html code.

Photo Example

<mat-step [stepControl]="personalData" [editable]="true">
 <form [formGroup]="personalData">
  <ng-template matStepLabel>account.signUp.personalData</ng-template>
    <p class="stepper-title">account.signUp.personalData</p>
                        <div class="wrapper-hint">
                            <input class="input" formControlName="name" [placeholder]="'account.signUp.fullName' | translate" required>
                            <div class="not-match absolute" *ngIf="this.personalData?.controls?.name?.invalid && this.personalData?.controls?.name?.value">
                                account.signUp.hint.name
                            </div>
                        </div>
    
                        <div class="radio-group-signup">
                            <mat-checkbox formControlName="isBrazilian" [(ngModel)]="isBrazilianCheck" color="primary">
                                account.signUp.brazilian
                            </mat-checkbox>
    
                            <mat-radio-group formControlName="person" selected>
                                <mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="true">account.signUp.naturalPerson</mat-radio-button>
                                <mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="false">account.signUp.legalEntity</mat-radio-button>
                            </mat-radio-group>
                        </div>
    
                        <div class="wrapper-hint">
                            <input matInput class="input" formControlName="cpg" [mask]="isBrazilianCheck ? (personalData?.value?.person ? '000.000.000-00' : '00.000.000/0000-00') : ''"
                                    [showMaskTyped]="true" [placeholder]="'account.signUp.insertPassport' | translate" required>
                            <div class="not-match absolute" *ngIf="(personalData?.controls?.cpg?.invalid && personalData?.controls?.cpg?.value)">
                                account.signUp.hint.identification
                            </div>

how to save checkbox state in android

I'm working on an android cooking app (using java) and the homepage has a recycler view populated with recipes which users can like (similar to FaceBook posts). The like button is a checkbox, what is the best way to save the state of the like checkbox for every recipe, so when the user signs out of the app and sign in again they will not like the same recipe more than one time.

Is using SharedPreference a good idea in this situation?

**im using MySql as a database and firebase is not used.

checkbox value set as false when tried to update other page

I have a data in a table that has 3 pages. where in the data table there is a checkbox to update data fields that have a value of true or false, however, when I make changes to the data on page 2, the checkboxes on page 1 and 3 will always be false. so, all my data in page 1 and 3 will set as false.

i tried to change it without checkbox and it works perfectly, as if there is something wrong with the checkbox, could u guys tell me where is my fault and what should i do?? i really need ur help guys, thankyou

this is my code now

<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
                <apex:tab label="Validate" name="validate" id="tabValidate">
                    <apex:outputPanel id="wrapSalesPlanTable">
                        <script>
                        j$(document).ready( function () {
                            j$('[id$="salesPlanTable"]').DataTable({iDisplayLength: 50, searching: false, dom: 'lBfrtip', stateSave: true, order: [], buttons: ['excel']});
                        });
                        </script>
                        <table id="salesPlanTable" class="stripe row-border order-column" style="width:100%"> 
                            <thead>
                                <tr>
                                    <th id="columnA">No</th>
                                    <th id="columnA">PPD Delivery Schedule</th>
                                    <th id="columnB">Check Opex</th>
                                </tr>
                            </thead>
                            <tbody>
                                <apex:repeat value="{!dataSalesPlan}" var="i">
                                    <tr>
                                        <th id="columnA">
                                            <apex:outputText value="{!i.index}"/>
                                        </th>
                                        <th id="columnA">
                                            <apex:input type="date" style="width:100px" id="deliveryschedule" value="{!i.deliverySchedulePPD}"/>
                                        </th>
                                        <th id="columnB">
                                            <apex:inputCheckbox styleClass="checkOpex{!i.spd.ID} checkOpex {!i.spd.ID}" value="{!i.opex}"/>
                                        </th>
                                     </tr>
                                </apex:repeat>
                            </tbody>
                        </table>
                    </apex:outputPanel>
                </apex:tab>
</apex:tabPanel>

Apex code

public void loadData() {
       getDataSalesPlan = Database.query(query);
        Integer spdIndex = 0;
        dataSalesPlan = new List<SPDWrapper>();
        for(Sales_Plan_Detail__c spd : getDataSalesPlan) {
            dataSalesPlan.add(new SPDWrapper(spdIndex, spd, getMaterialGroup(spd.Material__r.Material_Group__c), getAreaSOD(spd.Plant__c)));
            spdIndex++;
        }
}
public void save() {
        Integer spdIndex = 0;
        Boolean setIDSPD;
    for(Sales_Plan_Detail__c ppd: getDataSalesPlan){
           setIDSPD = FALSE;
           SPDWrapper spdWrapper = dataSalesPlan[spdIndex];
           
           if(ppd.Checklist_Opex__c != spdWrapper.opex){
               updateOpexList.put(spdWrapper.spd.Id, spdWrapper.opex);
               setIDSPD = TRUE; 
           }
           
           if(setIDSPD == TRUE){
               updateSPDIds.add(spdWrapper.spd.Id);
           }
           spdIndex++;
           
        }
        Set<String> SPDValue = new Set<String>(updateSPDIds);
        SPDValue.addAll(updateSPDIds); 
     
        List<Sales_Plan_Detail__c> spdToUpdate = new List<Sales_Plan_Detail__c>();
        if(SPDValue.size() > 0){    
            for(Sales_Plan_Detail__c ent : [SELECT Id, Prospect__r.Id FROM Sales_Plan_Detail__c WHERE Id IN :SPDValue]){
                Sales_Plan_Detail__c spdList = new Sales_Plan_Detail__c();
                spdList.Id = ent.Id;
                if(updateOpexList.containsKey(ent.Id)) {
                    spdList.Checklist_Opex__c = updateOpexList.get(ent.Id);
                }
                spdToUpdate.add(spdList);
            }
        Database.SaveResult[] spdResults = Database.update(spdToUpdate, false);
}

public class SPDWrapper{
        public Integer index {get; set;}
        public Sales_Plan_Detail__c spd {get;set;}
        public Boolean opex {get; set;}
        public SPDWrapper(Integer getIndex, Sales_Plan_Detail__c getSpd, String materialGroupBucket, String getAreaSOD){
            index = getIndex;
            spd = getSpd;
            opex = spd.Checklist_Opex__c;
         }
}

How to associate label with checkbox but not using "for=id"

i have this code:

<li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxFour" value="Alergia4"><label for="checkboxFour">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxFive" value="Alergia5"><label for="checkboxFive">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxSix" value="Alergia6" ><label for="checkboxSix">Alergia 1</label></li>
                        

But I don't want to use "id" and "for" because I have to do other thing later and I can't use them. I have see this question: Possible to associate label with checkbox without using "for=id"? and I have triet what the first peson says:

<li><label ><input type="checkbox" name="Alergia1">Alergia 1</label></li>
<li><label ><input type="checkbox"  name="Alergia2" >Alergia 1</label></li>

But It does not work either.

This is the entire project to see that it does not work:

.font-robo {
  font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}

.font-poppins {
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}


html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}
* {
  padding: 0;
  margin: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* ==========================================================================
   #GRID
   ========================================================================== */

 

/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0;
}

button {
  outline: none;
  background: none;
  border: none;
}

/* ==========================================================================
   #PAGE WRAPPER
   ========================================================================== */
.page-wrapper {
  height:100vh;
}

body {
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
  color: #00929a !important;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 15px;
}

h6 {
  font-size: 13px;
}

/* ==========================================================================
   #BACKGROUND
   ========================================================================== */
.bg-blue {
  background: #2c6ed5;
}

.bg-red {
  background: #fa4251;
}

.bg-gra-01 {
  background: -webkit-gradient(linear, left bottom, left top, from(#00929a), to(#034649));
  background: -webkit-linear-gradient(bottom, #00929a 0%, #034649 100%);
  background: -moz-linear-gradient(bottom, #00929a 0%, #034649 100%);
  background: -o-linear-gradient(bottom, #00929a 0%, #034649 100%);
  background: linear-gradient(to top, #00929a 0%, #034649 100%);
}

.bg-gra-02 {
  background: -webkit-gradient(linear, left bottom, right top, from(#00929a), to(#034649));
  background: -webkit-linear-gradient(bottom left, #00929a 0%, #034649 100%);
  background: -moz-linear-gradient(bottom left, #00929a 0%, #034649 100%);
  background: -o-linear-gradient(bottom left, #00929a 0%, #034649 100%);
  background: linear-gradient(to top right, #00929a 0%, #034649 100%);
}




/* ==========================================================================
   #CHECKBOX
   ========================================================================== */
   
   .container {
     
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
}

ul.ks-cboxtags {
    list-style: none;
    margin-bottom: 20px;
}

ul.ks-cboxtags li{
  display: inline;
}
ul.ks-cboxtags li label{
 
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid rgba(139, 139, 139, .3);
    color: #adadad;
    border-radius: 25px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.ks-cboxtags li label {
  padding: 20px 20px;
  cursor: pointer;
  margin:20px;
}

ul.ks-cboxtags li label::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  padding: 20px;
  
  transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label {
  border: 2px solid #00929a;
  background-color: #00929a;
  color: #fff;
  transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
    width: 60vh;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 2px solid #034649;
}

/* ==========================================================================
   #SPACING
   ========================================================================== */
.p-t-100 {
  padding-top: 100px;
}

.p-t-130 {
  padding-top: 130px;
}

.p-t-180 {
  padding-top: 180px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-30 {
  padding-top: 30px;
}

.p-b-100 {
  padding-bottom: 100px;
}

.m-r-45 {
  margin-right: 45px;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
.wrapper {
  margin: 0 auto;
}

.wrapper--w960 {
  max-width: 960px;
}

.wrapper--w780 {
  max-width: 780px;
}

.wrapper--w680 {
  max-width: 680px;
}

/* ==========================================================================
   #BUTTON
   ========================================================================== */
.btn {
  display: inline-block;
  line-height: 50px;
  padding: 0 50px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
  font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}

.btn--radius {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.btn--radius-2 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.btn--pill {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.btn--green {
  background: #00929a;
}

.btn--green:hover {
  background: #00929a;
}

.btn--blue {
  background: #034649;
}

.btn--blue:hover {
  background: #034649;
}

/* ==========================================================================
   #DATE PICKER
   ========================================================================== */
td.active {
  background-color: #034649;
}

input[type="date" i] {
  padding: 14px;
}

.table-condensed td, .table-condensed th {
  font-size: 14px;
  font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
  font-weight: 400;
}

.daterangepicker td {
  width: 40px;
  height: 30px;
}

.daterangepicker {
  border: none;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  display: none;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
}

.daterangepicker::after, .daterangepicker::before {
  display: none;
}

.daterangepicker thead tr th {
  padding: 10px 0;
}

.daterangepicker .table-condensed th select {
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 14px;
  padding: 5px;
  outline: none;
}

/* ==========================================================================
   #FORM
   ========================================================================== */
input {
  outline: none;
  margin: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
}

.input--style-4 {
  line-height: 50px;
  background: #fafafa;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 16px;
  color: #666;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.input--style-4::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #666;
}

.input--style-4:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #666;
  opacity: 1;
}

.input--style-4::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #666;
  opacity: 1;
}

.input--style-4:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #666;
}

.input--style-4:-ms-input-placeholder {
  /* Microsoft Edge */
  color: #666;
}

.label {
  font-size: 16px;
  color: #555;
  text-transform: capitalize;
  display: block;
  margin-bottom: 5px;
}

.radio-container {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-container input:checked ~ .checkmark {
  background-color: #e5e5e5;
}

.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #00929a;
}

.checkmark {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #e5e5e5;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.input-group {
  position: relative;
  margin-bottom: 22px;
}

.input-group-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  font-size: 18px;
  color: #999;
  right: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

/* ==========================================================================
   #SELECT2
   ========================================================================== */
.select--no-search .select2-search {
  display: none !important;
}

.rs-select2 .select2-container {
  width: 100% !important;
  outline: none;
  background: #fafafa;
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.rs-select2 .select2-container .select2-selection--single {
  outline: none;
  border: none;
  height: 50px;
  background: transparent;
}

.rs-select2 .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  padding-left: 0;
  color: #555;
  font-size: 16px;
  font-family: inherit;
  padding-left: 22px;
  padding-right: 50px;
}

.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after {
  font-family: "Material-Design-Iconic-Font";
  content: '\f2f9';
  font-size: 24px;
  color: #999;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.select2-container--open .select2-dropdown--below {
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  overflow: hidden;
}

.select2-container--default .select2-results__option {
  padding-left: 22px;
}

/* ==========================================================================
   #TITLE
   ========================================================================== */
.title {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 20px;
}

/*========================================================================== */
.frase {
  font-size: 18px;
  color: #525252;
  font-weight: 400;
  margin-bottom: 40px;
}

/* ==========================================================================
   #CARD
   ========================================================================== */
.card {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
}

.card-4 {
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}

.card-4 .card-body {
  padding: 17px 50px;
  padding-bottom: 55px;
  padding-top: 20px;
}

@media (max-width: 767px) {
  .card-4 .card-body {
    padding: 50px 40px;
  }
}

<!DOCTYPE html>
<html lang="es">

<head>
    <!-- Required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Title Page-->
    <title>Alergias</title>

    <!-- Icons font CSS-->
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <!-- Font special for pages-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Vendor CSS-->

    <!-- Main CSS-->
    <link href="css/alergias.css" rel="stylesheet" media="all">

</head>

<body>
    <div class="page-wrapper bg-gra-02 p-t-130 p-b-100 font-poppins">
        <div class="wrapper wrapper--w680">
            <div class="card card-4">
                <div class="card-body">
                    <h2 class="title">Alergias</h2>
                    <h5 class="frase">Por favor, elige todas las alergias que tengas, para poder hacer los menus adaptados a ti:</h5>
                    <form method="POST">
                    
                        <!---------------------------------------------------------------------->
                        

                        <div class="container">
                            <ul class="ks-cboxtags">
                              <li><label ><input type="checkbox" name="Alergia1">Alergia 1</label></li>
                              <li><label ><input type="checkbox"  name="Alergia2" >Alergia 1</label></li>
                              <li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li>
                              <li><input type="checkbox" id="checkboxFour" value="Alergia4"><label for="checkboxFour">Alergia 1</label></li>
                              <li><input type="checkbox" id="checkboxFive" value="Alergia5"><label for="checkboxFive">Alergia 1</label></li>
                              <li><input type="checkbox" id="checkboxSix" value="Alergia6" ><label for="checkboxSix">Alergia 1</label></li>
                              <li><input type="checkbox" id="checkboxSeven" value="Alergia7"><label for="checkboxSeven">Alergia 1</label></li>
                              <li><input type="checkbox" id="checkboxEight" value="Alergia8"><label for="checkboxEight">Alergia 1</label></li>
                            </ul>
                          
                          </div>

                        <!---------------------------------------------------------------------->


                        <div class="p-t-15">
                            <button class="btn btn--radius-2 btn--blue" type="submit">Registrarse</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>




</body>

</html>

So the first two checkboxes doesn't work. Is there other way to do that? Thank you!

Checkbox with links in text are not working

I have created a custom checkbox in Swift which has a textlabel with an underlined link in it.

The link is perfectly underlined in the textlabel and the link is working fine.

But... the link only works when I do a long tap on the underlined part, and if I just do a single tap it's selecting/unselecting the checkbox.

I want that only the square part is checked/unchecked with a single tap and the textlabel is opening the link on a single tap when a link is available.

Is this possible?

override func setupCheckBox() {
   self.addSubview(horizontalStackView)
    self.horizontalStackView.anchor(top: topAnchor, leading: leadingAnchor, bottom: bottomAnchor, trailing: trailingAnchor, padding: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))
    
    let containerCheckImage = UIView()
    containerCheckImage.translatesAutoresizingMaskIntoConstraints = false
    containerCheckImage.addSubview(checkImage)
    self.horizontalStackView.addArrangedSubview(containerCheckImage)
    self.horizontalStackView.addArrangedSubview(textView)
    
    NSLayoutConstraint.activate([
        self.checkImage.widthAnchor.constraint(equalToConstant: CheckBoxView.checkSize),
        self.checkImage.heightAnchor.constraint(equalToConstant: CheckBoxView.checkSize),
        self.checkImage.leadingAnchor.constraint(equalTo: containerCheckImage.leadingAnchor),
        self.checkImage.centerYAnchor.constraint(equalTo: containerCheckImage.centerYAnchor),
        containerCheckImage.topAnchor.constraint(equalTo: self.horizontalStackView.topAnchor),
        containerCheckImage.bottomAnchor.constraint(equalTo: self.horizontalStackView.bottomAnchor),
        containerCheckImage.widthAnchor.constraint(equalToConstant: CheckBoxView.checkSize),
        containerCheckImage.leadingAnchor.constraint(equalTo: self.horizontalStackView.leadingAnchor),
        self.textView.topAnchor.constraint(equalTo: self.horizontalStackView.topAnchor),
        self.textView.bottomAnchor.constraint(equalTo: self.horizontalStackView.bottomAnchor)
    ])
    
    self.isUserInteractionEnabled = true
    self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onCheckBoxTapped)))
}

@objc override func setupColors() {
    let isDarkMode = AppDelegate.isDarkMode
    self.textView.textColor = isDarkMode ? .white : fontColor
}

override func setText(_ text: String?) {
    guard let text = text else {
        return
    }
    
    let font = Font.regular.font(withSize: 14)
    let decoder = HTMLParser.make(withFont: font)
    let isDarkMode = AppDelegate.isDarkMode
    textView.attributedText = decoder.parseHTMLString(string: text)
    textView.linkTextAttributes = [NSAttributedString.Key.underlineStyle: 1, NSAttributedString.Key.backgroundColor: UIColor.clear, NSAttributedString.Key.foregroundColor: isDarkMode ? UIColor.white : UIColor.black]
}

override func setTintColor(_ color: UIColor) {
    self.textView.tintColor = color
}

@objc override func onCheckBoxTapped(_ sender: Any) {
    if checkBoxData != nil {
        selected = !selected
        checkBoxData?.selected = selected
        checkBoxDelegate?.checkboxSelected(selected: selected)
        selectedClosure?(selected)
    }
}

How to get forms values from HTTP-request in controller?

I'm creating simple web-application with simple logic inside. I use Java, Spring Boot and Thymeleaf How can I pass list from my HTML checkbox form to controller which processes that list?

enter image description here

Change value of an INPUT TEXT checking a checkbox

Why is this not working? It is supposed to work this way: if the checkbox is checked, it should take the content of a variable txt and write it to the input with id of show.

function myFunction() {
  if (document.getElementById('myRadio').checked) {
    var txt = "Done";
    document.getElementById("show").innerHTML = 'txt';
  }
}

<p>If the radio checkbox is checked the text from the variable text is written into input line with the ID of show</p>
        
<input type="checkbox" onclick="myFunction()" id="myRadio">

<br>
<br>

<input type="text" class="form-control" id="show">

Can't Change Checkbox Labels

I am unable to edit the labels for a set of checkboxes in my Excel file. The checkboxes were created using Form Controls (not ActiveX). I have been working with this file for many years and now suddenly cannot make any changes. I have tried editing them by clicking on Edit Text or by double clicking on the label itself. In both cases, the cursor does not activate. I also noticed that the font size of the text is smaller than in prior versions of the document, but the font size was never purposely changed.

On a separate note, the file also contains option buttons that do not always work. The button does not fill in when clicked on or there may be a delay. This is a new problem, too. I am not asking for help on this issue in this post but am providing it informationally in case it helps in determining what may be happening with the checkboxes. I appreciate any help.

iCheck - Checkboxes not reseting after form reset

After wasting like 2 days with this problem i finally decided to post this here and hope someone can help me. I work with "iCheck" (http://icheck.fronteed.com/) but also tried similar libraries that work roughly the same way. I try to achieve fancy checkboxes in form of a button - a pretty common thing i guess.

Now with iCheck and the other libraries i tested i always have one problem: I build my code to send an AjaxRequest to work with the data provided in a form and then reset the form. That works pretty neat, except for these chechboxes. If i change them to the other state they are not initialized with (like from FALSE to TRUE) and reset the form the button visually stays on that state until you click it once again. I works like it should with "normal" checkboxes.

I rebuild a small testpage and put it into jsfiddle. Is this a bug or am i totally overseeing something there? Can someone explain to me why that happens and how to engage with this?

HTML:

<form id="form">
  <input type="checkbox" class="check_test" name="test" value="1"><label>Checkbox 1</label>
  <input type="checkbox"  name="test2" value="1"><label>Checkbox 1</label>
  <br/>
  <button type="reset" onClick="this.form.reset"> Reset </button>
</form>

Javascript:

$(document).ready(function(){
  $('.check_test').each(function(){
    var self = $(this),
        label = self.next(),
        label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line-blue',
      radioClass: 'iradio_line-blue',
      insert: '<div class="icheck_line-icon"></div>' + label_text
    });
  });
});

https://jsfiddle.net/p80dctkv/#&togetherjs=w6keeRvH3J

Thank you in advance.

Multiple checkboxes in datagridview cell (vb.net)

In my datagridview, I need to create multiple checkboxes in some cases, like that :

After a lot of searches, I found this : Multiple CheckBox controls in a DataGrid cell. Is it possible to do the same in VB.NET (I use Visual Studio 2022) ? Thanks.

how to get the values of a checked checkbox and the output it on a input field

I am trying to get the checked values of a checkbox and then display them in a field. I have two files the index which has the input field and then the checkbox is made in a modal which is a different component, the selectlanguage. I want that when a user checks one or more checkbox(es), the value(s) appears on the input and when unchecked, the value leaves the field.

Presently, what I am able to achieve is only a single value appearing on the input field.

Here is a snippet of the code.

index.js

import React, { useState } from "react";
import SelectLanguage from "../../components/modal/selectLanguage";

const index = () => {
const [chosenLanguage, setChosenLanguage] = useState([]);

function checkLanguage(e) {
  setChosenLanguage(e.target.name);
};

<label className="relative block p-3 border-b-2 border-gray-200 w-full" for="languages">
  <span for="languages">languages</span>
  <input
    id="languages"
    type="text"
    placeholder="Spanish, Arabic"
    autoComplete="off"
    onClick={languageShowModal}
    value={chosenLanguage}
  />
</label>
}

export default index;

selectlanguage.js

import { useState } from "react";

export default function SelectLanguage({ open, handleClose, checkLanguage }) {
  const handleCheckbox = (e) => {
    alert(e.target.name);
  };

  return open ? (
    <div>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>spanish</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>french</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>arabic</span>
      </label>
    </div>
  ) : (
    ""
  );
}

JS hide all elements with same class except one

I got multiple checkboxes and some of them are with same class, name and value. How can I hide them except one with JS or Jquery? Here is my code which is echoing multiple checkboxes (there is a loop before them)

 <input style="width: auto;" type="checkbox" name="<?php the_field('tiker'); ?>" value="<?php the_field('tiker'); ?>">
 <label for="scales"><?php the_field('tiker'); ?></label>

Examples of outputed inputs:

    <div style="margin-top: 5px;"> 
<input style="width: auto;" type="checkbox" name="SBER" value="SBER"> 
<label for="scales">SBER</label>
<input style="width: auto;" type="checkbox" name="SBER" value="SBER"> 
<label for="scales">SBER</label> 
<input style="width: auto;" type="checkbox" name="vtbr" value="vtbr"> 
<label for="scales">vtbr</label> 
<input style="width: auto;" type="checkbox" name="APL" value="APL"> 
<label for="scales">APL</label>
</div>

Vues js: why checkboxes dont filtering values to show?

Im printing all the arrays for each input type="checkbox" but when i check a checkbox nothing happens.
I just want when checking a checkbox only print the array in the value of the checkbox.

Here is my code:

<template>
  <main>
    <section>
      <div>
        <input id="boundingBox" type="checkbox" value="boundingBoxes" v-model="checkboxes">
        <label for="boundingBox"> i1 </label>

        <input id="tree" type="checkbox" value="trees" v-model="checkboxes">
        <label for="tree"> i2 </label>

        <input id="last" type="checkbox" value="cars" v-model="checkboxes">
        <label for="last"> i3 </label>
      </div>
      
      <div>
        <h2> list: </h2>
        <div v-for="(item, index) in checkboxes" :key="index">
          <p></p>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
  const boundingBoxes = [
    {
      name: "bounding box",
      color: "red"
    },
    {
      name: "bounding box",
      color: "orange"
    }
  ];

  const trees = [
    {
      name: "tree",
      color: "green"
    },
    {
      name: "tree",
      color: "red"
    },
    {
      name: "tree",
      color: "yellow"
    }
  ];

  const cars = [
    {
      name: "car",
      color: "black"
    },
    {
      name: "car",
      color: "blue"
    },
    {
      name: "car",
      color: "brown"
    }
  ]

  export default {
    data() {
      return {
        checkboxes:[
          boundingBoxes,
          trees,
          cars
        ],
      }
    },
  }
</script>

If there is something to improve or wrong tell me.
At the moment all the code is working well only the filtering with the checkboxes is not working.

Thanks.

How to print checkbox related array of objects values in vuejs?

Im trying to print the array of objects related to the checkbox.
For example: checkbox tree when is checked must print trees array.
If no checkbox is selected print all arrays.
I need it to be in the easiest way as possible.

Here is my code:

<template>
  <main>
    <section>
      <div>
        <input id="boundingBox" type="checkbox" value="boundingBoxes" v-model="boundingBoxes">
        <label for="boundingBox"> i1 </label>

        <input id="tree" type="checkbox" value="trees" v-model="trees">
        <label for="tree"> i2 </label>

        <input id="last" type="checkbox" value="cars" v-model="cars">
        <label for="last"> i3 </label>
      </div>
      
      <div class="divWhereTheValuesArePrinted">
        <!-- print selected checkboxes -->
        <!-- if no checkboxes are selected print all -->
      </div>
    </section>
  </main>
</template>

<script>
  export default {
    data() {
      return {
        boundingBoxes: [
          {
            name: "bounding box",
            color: "red"
          },
          {
            name: "bounding box",
            color: "orange"
          }
        ],
        trees: [
          {
            name: "tree",
            color: "green"
          },
          {
            name: "tree",
            color: "red"
          },
          {
            name: "tree",
            color: "yellow"
          }
        ],
        cars: [
          {
            name: "car",
            color: "black"
          },
          {
            name: "car",
            color: "blue"
          },
          {
            name: "car",
            color: "brown"
          }
        ]
      }
    },
  }
</script>

In the script are the arrays to print.
And the checkboxes v-model="" have the name of the array.
Below the div with the inputs and labels is the div where the values are printed.

Thanks for help in advance.

Print array object related to a clicked-on checkbox in vuejs3?

I have 3 checkboxes and when I click one it should print an array of objects related to the checkbox.

For example checkbox 1 have an array with a red box, a yellow box, and a blue box. When clicking that checkbox I need to print those values and if no checkbox is selected print all categories.

My code for the moment:

<template>
  <main>
    <section>
      <div>
        <input id="boundingBox" type="checkbox" value="boundingBox" v-model="checkboxes">
        <label for="boundingBox"> i1 </label>

        <input id="tree" type="checkbox" value="tree" v-model="checkboxes">
        <label for="tree"> i2 </label>

        <input id="last" type="checkbox" value="last" v-model="checkboxes">
        <label for="last"> i3 </label>
      </div>
      
      <p>Checked: </p>
    </section>
  </main>
</template>

<script>
  export default {
    data() {
      return {
        checkboxes:[]
      }
    },
  }
</script>

Thanks for help in advance.

Input Checkbox Only Updates One Value But Other Inputs Don't Update?

So I have this app I made where it calculates the menu items total and includes a $5 delivery fee. The problem is the 4th option only includes the $5 fee in the total, but the other 3 options don't include the fee

Here's my codepen https://codepen.io/shodoro/pen/dydNopX

Why is my 4th option, the smoothie $4 the only input checkbox that adds the delivery fee correctly?

The first 3 options don't include the $5 delivery fee in the total and I don't know how to fix it

Here's my JS

      function updatePrice() {
          let items = 0;
          let deliveryFee = document.getElementById('fee')
          let tax = document.getElementById('tax')    
          let tip = document.getElementById('tip')

          tax = .1
          tip = .2

          document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
              if (checkBox.checked) {
                  items += +checkBox.value
                  deliveryFee = 5
              } else {
                  deliveryFee = 0
              }
          })


          document.getElementById("price").textContent = `Food Total: $${(items).toFixed(2)}`;
          document.getElementById("tax").textContent = `Tax (10%): $${(items * tax).toFixed(2)}`;
          document.getElementById("tip").textContent = `Tip (20%): $${(items * tip).toFixed(2)}`;
          document.getElementById("total").textContent = `Your order total is: $${((items * tax)+(items * tip)+(items)+(deliveryFee)).toFixed(2)}`;
      }

Essential I want all options to include the delivery fee when clicking them, but also making sure the delivery fee resets to 0 whenever you uncheck all options.

Force one selection checkboxe with REACT

how can I force only one check among multiple checkboxes ? For now I can select A, B and C but I only want to select ONE choice no more.

Here is my code :

const TabContent = ({ name, typeText }) => {
    const [a, setA] = useState(false)
    const [b, setB] = useState(false)
    const [c, setC] = useState(false)

    function handleChange(e) {
        e.preventDefault()
    }
    return (
        <form onSubmit={handleChange} >
            {a}
            {b}
            {b}
            <input type="checkbox" onChange={(e) => setA(!a)} />  <label> A </label>
            <input type="checkbox" onChange={(e) => setB(!b)} /> <label>B</label>
            <input type="checkbox" onChange={(e) => setC(!C)} /> <label>C</label>
        </form>
        {
        (a || b) ?
            (<div>
                <p className="mt-6 py-1">My choices </p>
                <SafeAreaView>
                    <TextInput
                        onChangeText={(value) => setText(value)}
                        value={text}
                    />
                </SafeAreaView>
            </div >
            )
            : ('')
        }
        {
            c?
                (...)
        }
        </div >
    );
};

How do I get the values of all the selected check box from thymeleaf in spring boot

Data is being populated from database

<div th:each="comm : ${listBothComm}">
     <label class="list-group-item d-flex gap-2"> <input
         checked="" class="form-check-input flex-shrink-0"
         th:field="*{comm_cd}" th:value="${comm.comm_cd}" type="checkbox"><span
         th:text="${comm.comm_nm}"> </span>
      </label>
</div>

Sending data to FlatList Checkbox from different FlatList

I'm using React-Native and Expo.

I've got a situation where I have an image flatlist, populated from an SQLite database. I also have a 2nd flatlist populated from a different table in the database. The 2nd flatlist shows Checkboxes and these checkboxes add/remove entries into a bridge table in the database, as seen below:

Table 'images':

file_name
file1.jpg
file2.jpg

Table 'types':

type
type_a
type_b

Table 'images_types_bridge':

file_name	type
file1.jpg	type_a
file2.jpg	type_a
file2.jpg	type_b

The image flatlist shows all the images from 'images'. When at least one image is selected by the user (tapping selects the image), a component appears at the bottom of the screen containing options for the user, e.g. the ability to delete the image. It also contains a flatlist of checkboxes of all the types from the 'types' table. When a user checks/unchecks one of these boxes, the 'images_types_bridge' table is updated accordingly. This all works fine.

The issue comes in populating the checkboxes when an image is initially selected. I originally thought it best to have each flatlist item manage its own state, like the following:

MyCheckBox.js:

import { useState } from 'react';
import CheckBox from 'expo-checkbox';

const MyCheckBox = props => {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <CheckBox
      value={isChecked}
      onValueChange={(newValue) => { setIsChecked(newValue) }} />
  );
};

export default MyCheckBox;

And the relevant code in ImagesScreen.js:

const [images, setImages] = useState([]);
const [types, setTypes] = useState([]);
const [imagesExtra, setImagesExtra] = useState(true);

// selectedImages is an array of image Flatlist indices to indicate which images are currently selected.
const [selectedImages, setSelectedImages] = useState([]);
...

<Flatlist
  /*
    images = {
      "file_name": "sample_file_name.jpg",
      "types": ["type_a", "type_b", etc.]
  */
  data={images}
  // extraData is used for updating the displayed flatlist such as when the user selects an image
  extraData={imagesExtra} 
  keyExtractor={item => item.file_name}
  renderItem={renderImageItem}
/>
...
// This flatlist is only visible if an image is selected and the status of each of the checkboxes in it should reflect the selected image's 'types' array in the item object.
<Flatlist
  data={types}
  keyExtractor={item => item.type}
  renderItem={renderTypeItem}
/>
...
function renderTypeItem({ item }) {
  return (
    <MyCheckBox
      onValueChange={onCheckChange} // onCheckChange updates the database
      item={item}
    />
  );
}

How can I set the values of the checkboxes (true/false) when a user selects an image (I only need to worry about the first image selected) based on what is contained in the image flatlist item object's "types" array?

REACT- Making 2 different dynamic displays depending on a selection checkboxes ( everything is on the same page now)

depending on the selection of my user Change the type or Choose the comments (he can select only one choice), there will be a different display, but my code displayed both options in the same page.

So, in the begining there are only 2 checkboxes Change the type or Choose the comments then depending on the selection the display appears

 export default function App(){
  ...
  return (
    <>
     {/* Step 1- 2 checkboxes are displayed */}
      <form onSubmit={handleSubmit}>
        <input type="checkbox" onChange={(e) => setType(e.target.value)} />
        <span className="text-md p-1 font-bold  leading-8 text-gray-500">
          Change the type{" "}
        </span>
        <input type="checkbox" onChange={(e) => setComment(e.target.value)} />
        <span className="text-md p-1 font-bold  leading-8 text-gray-500">
          Choose the comments{" "}
        </span>
      </form>
      
      {/*Step 2 - if setType ==true then display */}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Location:
        </label>
        <input
          type="text"
          value={location}
          placeholder="Location"
          onChange={(e) => setLocation(e.target.value)}
        />
      </form>

      {/*Step 2 - if setComment ==true (selected) then display */}
      <form onSubmit={handleSubmit}>
        <Comments />
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Location:
        </label>
        <input
          type="text"
          value={location}
          placeholder="Location"
          onChange={(e) => setLocation(e.target.value)}
        />
      </form>
    </>
  );
}

Here is my code

REACT- I don't see the event traceability when I select or check an option

I don't know why in my console log (f12) I'm not able to see the event when I click on Availabitlity, Trust (true if selected else false) or when I change the Taste or Comment to see the selection made in the console

I have in my console :

useEventListener.js:12 Uncaught TypeError: callbackRef.current is not a function
    at handler (useEventListener.js:12:1)
handler @ useEventListener.js:12

MenuItemDisplay.jsx :

export default function MenuItemDisplay() {
 
  const TASTE = [
    { label: "Good", value: "Good" },
  ...
  ];

  const COMMENTS = [
    { label: "0/4", value: "VeryBad" },
   ...
  ];

  function Checkbox({ value }) {
    const [checked, setChecked] = React.useState(true);

    return (
      <label>
        <input
          type="checkbox"
          defaultChecked={checked}
          onChange={() => setChecked(!checked)}
        />
        {value}
      </label>
    );
  }

  return (
    <>
      <h1>{item.name}</h1>
      <div>
        <div className="TextStyle">
          Taste
          <CustomDropdown
            style={styles.select}
            options={TASTE}
            defaultValue={TASTE.find((t) => t.label === item.taste)}
            styleSelect={colourStyles}
            isMulti={true}
          />
        </div>
        <div className="TextStyle">
          Comments
          <CustomDropdown
            style={styles.select}
            options={COMMENTS}
            defaultValue={COMMENTS.find((t) => t.label === item.comments)}
          />
        </div>
        <div className="TextStyle">
          Availability <Checkbox value={!!item.availability} />
        </div>
        <div className="TextStyle">
          Trust <Checkbox value={!!item.trust} />
        </div>           
    </>
  );
}

Here is my code

Set color for checkbox present in datagridview c#

I have a datagridview in windows form. It looks like this.

In this, have one Checkbox column, two textbox column.

My requirement is need to set readonly true and set grey color for the checkbox for the country has Germany as like below.

Not like below

I need to set color for checkbox only not for datagridview cell.

Is anyone have idea for this?

OnCheckedChanged not working in Asp.Net and VB (codebehind)

I have a problem with the trigger of the OnCheckedChanged. When I click the checkbox (switch toggle), the OnCheckedChanged is not firing. I already tried many solutions like trigger it in JS part but no luck.

Below is the checkbox code:

<input type="checkbox" data-toggle="toggle" data-onstyle="info" data-offstyle="secondary" data-on="Ja" data-off="Nee" data-size="xs" runat="server" 
                        oncheckedchanged="showProductFoto_CheckedChanged" AutoPostBack="true"
                        style="margin-top: -5px;"  runat="server" id="showProductFoto" onchange="IncludeWithoutPhotos(this)" ClientIDMode="Static"/>

How to implement a checkbox using formik?

I want to implement a list of checkbox. The code right now is this:

import React from 'react';
import { useSelector } from "react-redux";

/* MUI */
import { Box, Typography, CircularProgress } from '@material-ui/core';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

/* Formik */
import { Field } from 'formik';

const TagInformation = props => {
    const tagSelector = useSelector((state) => state.products);
    const tagsData = tagSelector.list;

    return (
        <section>
            <Typography variant="h6"> Tag Information </Typography>
            {tagSelector.successful
                ? tagsData.content.map((tag) => (
                    <Box margin={1}>
                        <Field name="tags" label={tag.external_id} value={tag.id} component={FormControlLabel}
                        />
                    </Box>
                ))
                :
                <CircularProgress />
            }
        </section>
    )
};

TagInformation.label = 'Tag Information';
TagInformation.initialValues = {
    tags: []
};

export default TagInformation;

However, the value doesn't get saved.

I have an array of tags (example: [vegan, glutenFree, ...]) that I want to put in a list of Checkboxes.

As you can see in the initialValues we have the values that I want to put inside -> tags:[].

And the final result I want it like this: tags:[vegan, glutenFree, ...] or whatever checkbox is clicked. However when I click on submit I am seeing that the tags is empty -> tags:[]

I am using Formik in for the form and MUI for the design. And according to formik I can put a component in the field. I can visualize correctly in the website. But when I click on submit I don't see the value anywhere. I tried different things, but I don't know how to fix.

Any help?

js react converting dropdown to checkbox filter

Hej!

I am a newbie to javascript but was able to implement a dropdown menu filtering my json-data (everything works fine) but when I convert/change it into checkboxes I won't get any results in my result list.

// dropdown

const ContentBuilder = () => {
    const options = [
        { label: "Landwirtschaft", value: "Landwirtschaft" },
        { label: "Forstwirtschaft", value: "Forstwirtschaft" },
        ]

    const [newData, setNewData] = React.useState([]);
    const [selectedValue, setSelectedValue] = React.useState(options[0]);

    const filteredData = data.filter(x => 
        x.Sektor == selectedValue)

    const handleFilterInput = (event) => {
        let value = event.target.value;
        setSelectedValue(value);
    };


    return (
        <section className="content">
            <div className="container">
                <div className="columns table">
                    <div className="column is-four-fifth filter">
                        <label>Sektion <br/>
                            <select 
                               value={selectedValue} 
                               onChange={handleFilterInput}
                             >
                            {options.map((option) => (
                                <option value={option.value}>{option.label}</option>
                            ))}
                            </select>
                        </label>
                    </div>
                    <div className="column is-one-fifth">
                        <div className="container">
                            <div className="liste">
                                <List data={filteredData}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

if I only change the select to input and add the 'checkbox' type all I get is an empty page

// checkboxes

.
.
.

<input
type = "checkbox"
className = "sektor-checkbox"
value={selectedValue} 
onChange={handleFilterInput}
>
    {options.map((option) => (
        <option value={option.value}>{option.label}</option>
    ))}
</input>
.
.
.

If I put the 'checkbox' inside the map I get the checkboxes but no result list and therefor no filter.

.
.
.

{options.map((option) => (
<>
<input
type = "checkbox"
className = "sektor-checkbox"
value={selectedValue} 
onChange={handleFilterInput}
>
</input>
<option value={option.value}>{option.label}</option>
</>
))}

.
.
.

// json

[
    {
        "Pflanzenname": ["Hanf (Samen-/Faser-)"],
        "Sektor":       "Landwirtschaft",
    },{
        "Pflanzenname": "Soja",
        "Sektor":       "Landwirtschaft",
    },{
        "Pflanzenname": "Hirse (Sorghum-/Zucker-)",
        "Sektor":       "Landwirtschaft",
    },{
        "Pflanzenname": "Riesenweizengras",
        "Sektor":       "Forstwirtschaft",
    }
]

Does anybody know what I'm missing? Any help is appreciated! :)

Tkinter get checkbuttons checked

I am new to Tkinter trying to get the value of the checked checkbuttons. So far, I am able to use a loop on Checkbutton in order to get a list of available check buttons from a list. How can I use a button to detect which of the check buttons are checked?

This is my code so far (for this part):

INGREDIENTS = ['cheese', 'ham', 'pickle', 'mustard', 'lettuce']
text = Text(root, width=40, height=20)
for i in INGREDIENTS:
    cb = Checkbutton(text="%s" % i, padx=0, pady=0, bd=0)
    text.window_create("end", window=cb)
    text.insert("end", "\n")
    cb.pack()

I know I have to use a button connected to a function in order to get the checked values, but I cannot think of a way to create the function and connect it to the list of check boxes.

Can you help me please? I can't use OOP, my code would be ruined (it is already long and I cannot reformat it all)

Thank you in advice.

Kendo checkbox toggle true and false states not working properly

I know this is probably a pretty dumb question, and I apologize. I am pretty new to this all. I'm trying to get it so when one or more checkbox is clicked, I'm able to get a button to appear. I would like the toggle function to work if one or more checkbox is clicked, but instead it will turn on when I select one checkbox, then turn off during the next selection. I'm sure I've got a couple of unnecessary properties added into here as well, but not too concerned about that. Any help would be appreciated. Thank you!

HTML: Button

<button class="btn btn-primary"
*ngIf="switchCase" style="float:right"
>Save</button>

HTML: Checkbox Column

<kendo-grid-column field="checkbox" editor="boolean">
    <ng-template kendoGridCellTemplate let-dataItem id="flexSwitchCheckChecked"
    >
    <input type="checkbox" (click)="toggleButton(dataItem, 'checkbox' 
    [checked]="dataItem.checkbox"
    [width]="40"
      >

TS: Button click method

public switchCase: boolean = false;
  toggleButton() {
    this.switchCase = !this.switchCase;

Getting multiple values for checkboxes with dynamic data react

Get All values of checkboxes from dynamic values

import * as React from "react";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import axios from "axios";

export default function Checkboxes() {
const [users, setUsers] = React.useState([]);

const [isChecked, setIsChecked] = React.useState(() =>
users.map((i) => false)
);

React.useEffect(() => {
getUsers();
}, []);
const getUsers = async () => {
 try {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/users"
  );
  setUsers(response.data);
 } catch (error) {
  console.error(error);
 }
 };

  const isCheckboxChecked = (index, checked) => {
  setIsChecked((isChecked) => {
  return isChecked.map((c, i) => {
    if (i === index) return checked;
    return c;
  });
  });
  };
  console.log(isChecked);

 return (
 <div>
  {users.map((checkbox, index) => {
    return (
      <FormControlLabel
        key={index}
        control={
          <Checkbox
            checked={isChecked[index]}
            onChange={(e) => isCheckboxChecked(index, e.target.checked)}
          />
        }
        label={checkbox.name}
      />
    );
   })}
   <pre>{JSON.stringify(isChecked, null, 4)}</pre>
   </div>
   );
   }

i'm trying to do like this. https://codesandbox.io/s/69640376-material-ui-react-multiple-checkbox-using-tabs-8jogw?file=/demo.js but this has static data.

this is what i have done so far https://codesandbox.io/s/festive-euclid-w3dzpq?file=/src/App.js