Question 202264 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – unselect other check box when selecting one check checkbox react like

export default function App() {
 const  windShield = [
    { key: 0000, txt: 'Ok', isChecked: false, isImage: true },
    { key: 0001, txt: 'Pitted', isChecked: false, isImage: false },
    { key: 0002, txt: 'Cracked', isChecked: false, isImage: false },
    { key: 0003, txt: 'Star (S)', isChecked: false, isImage: false },
  ];

  const handleChange = (key: number) => {
    let temp = checked?.windShield?.map((item) => {
      if (key === item.key) {
        return { ...item, isChecked: !item.isChecked };
      }
      return { ...item, isChecked: false };
    });
    setChecked(prevState => {
      return {...prevState, windShield: temp}
    });
  };


  return (
    <div>
    <View style={{flexDirection: 'row', marginHorizontal: 8, flexWrap: 'wrap', flex: 1}}>
            {checked?.windShield?.map((item, index)=>{
              return(
                <View key={item.txt} style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', width: '50%'}}>
                  <Checkbox
                    status={item?.isChecked ? 'checked': 'unchecked'}
                    onPress={() => {
                      handleChange(item?.key)
                    }}
                  />
                  <Text>{item?.txt}</Text>
                </View>
              )
            })}
          </View>
    </div>
  );
}

when user is select OK (true) other option set false but when user click on any other with (ok option will false)

like when i click on first option and other 3 option act like radio button but other three option act like multi select

Tags:

2

Answers


  1. 0

    If it was me, I would handle it like this:

    It will act like a radio button (you cannot have multi selections)

    export default function App() {
 const  windShield = [
    { key: 0000, txt: 'Ok', isImage: true },
    { key: 0001, txt: 'Pitted', isImage: false },
    { key: 0002, txt: 'Cracked', isImage: false },
    { key: 0003, txt: 'Star (S)', isImage: false },
  ];
  const [isChecked, setIsChecked] = useState(0);


  return (
    <div>
    <View style={{flexDirection: 'row', marginHorizontal: 8, flexWrap: 'wrap', flex: 1}}>
            {checked?.windShield?.map((item, index)=>{
              return(
                <View key={item.txt} style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', width: '50%'}}>
                  <Checkbox
                    status={item?.isChecked === item.key ? 'checked': 'unchecked'}
                    onPress={() => {
                      setIsChecked(item.key)
                    }}
                  />
                  <Text>{item?.txt}</Text>
                </View>
              )
            })}
          </View>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Try to modify handleChange function as follows:

    const handleChange = (key: number) => {
  setChecked(prevState => {
    const temp = prevState.windShield.map(item => {
      if (key === item.key) {
        return { ...item, isChecked: !item.isChecked };
      }
      return item;
    });
    return { ...prevState, windShield: temp };
  });
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search