radio input still true after unchecked

user_18953033 0
Viewed 43

I have filter section with checkbox and radio when user unchecked for checkbox the content is hidding, but for radio I can't hidden the content he still true. Any help please

const inputChecked = (e) => {
    
    const updatedList = [...checked];
    if (e.target.checked) {
      updatedList = [...checked, e.target.value];
    }
    else {
        updatedList.splice(checked.indexOf(e.target.value),1)
      }
    
    setChecked(updatedList);
  };
  
 return (
  <form>
    <div onChange={inputChecked}>
      <div className='flex items-center'>
        <input type='radio' id="most_recent" name="sort_by" value='Most recent' />
        <label htmlFor='most_recent'>Most recent</label>
      </div>
      <div className='flex items-center'>
        <input type='radio' id="most_relevent" name="sort_by" value='Most relevent' />
        <label htmlFor='most_relevent'>Most relevent</label>
      </div>
    </div>

    <div onChange={inputChecked}>
      <div className='flex items-center'>
        <input type='checkbox' id="intership" name="intership" value='intership' />
        <label htmlFor='intership'>intership</label>
      </div>
      <div className='flex items-center'>
        <input type='checkbox' id="Director" name="director" value='Director' />
        <label htmlFor='Director'>Director</label>
      </div>
      <div className='flex items-center'>
        <input type='checkbox' id="Associate" name="associate" value='Associate' />
        <label htmlFor='Associate'>Associate</label>
      </div>
    </div>
  </form>
)

reactjs
1 Answers

Separate into two types of handle: handle for radio checked and handle for checkbox checked. Have to put onChange into each radio input <input type="radio" onChange={}... />. Try this below code:

const [prevRadio, setPrevRadio] = useState("")
      const radioChecked = (e) => {
                setPrevRadio(e.target.value)
                let updatedList = [...checked, e.target.value];
                updatedList.splice((prevRadio ? checked.indexOf(prevRadio) : (checked.length + 99)),1)
                setChecked(updatedList)
            }
      const inputChecked = (e) => { 
            let updatedList = [...checked];
            if (e.target.checked) {
              updatedList = [...checked, e.target.value];
            }
            else {
                updatedList.splice(checked.indexOf(e.target.value),1)
              }
            
            setChecked(updatedList);
          };
          
     return (
          <form>
            <div>
              <div className='flex items-center'>
                <input type='radio' id="most_recent" name="sort_by" value='Most recent' 
                onChange={inputChecked}/> //<== Put onChange in here
                <label htmlFor='most_recent'>Most recent</label>
              </div>
              <div className='flex items-center'>
                <input type='radio' id="most_relevent" name="sort_by" value='Most relevent' 
                onChange={inputChecked}/> //<== Put onChange in here
                <label htmlFor='most_relevent'>Most relevent</label>
              </div>
            </div>

            <div onChange={inputChecked}>
              <div className='flex items-center'>
                <input type='checkbox' id="intership" name="intership" value='intership' />
                <label htmlFor='intership'>intership</label>
              </div>
              <div className='flex items-center'>
                <input type='checkbox' id="Director" name="director" value='Director' />
                <label htmlFor='Director'>Director</label>
              </div>
              <div className='flex items-center'>
                <input type='checkbox' id="Associate" name="associate" value='Associate' />
                <label htmlFor='Associate'>Associate</label>
              </div>
            </div>
          </form>
        )

user_191174010
Related