Как узнать что отмеченные чекбоксы идут по порядку?

Question

В таблице есть строки, у строк есть чекбоксы которые можно отмечать. Как узнать что отмеченные чекбоксы идут друг за другом и делать кнопку активной?

Answer 1

Это решение адаптировано под реакт, ниже предыдущее решение (когда про реакт еще не было упоминаний)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
    <script type="text/babel">
      const {useState, Fragment} = React;  
      
      const data = [
        {id: 1, item: "item1", selected: false},  
        {id: 2, item: "item2", selected: false}, 
        {id: 3, item: "item3", selected: false}, 
        {id: 4, item: "item4", selected: false}, 
        {id: 5, item: "item5", selected: false}, 
      ];
      
      const Table = ({data}) => {     
        const [items, setItems] = useState(data) // не ясно из условия задачи откуда данные
        const handleChange = (e) => {
          const {id, checked} = e.target;
          const newData  = [...items];
          const item = newData.find(i => `${i.id}` === id);
          const index = newData.indexOf(item)
          const newItem = {...item, selected:checked}
          newData.splice(index, 1, newItem)
          setItems(newData); 
        }

        const checking = () => {
          let starts = 0;
          let beforeChk;
          items.forEach((chk, index) => {
            if (index === 0){
               starts = chk.selected ? 1 : 0;
            } else if (beforeChk.selected !== chk.selected && chk.selected === true){
               starts += 1
            }
            beforeChk = chk; 
          })  
          return starts
        }

        const handleClick = () => {
          console.log('количество непрерывных выделений', checking());  
        }
                 
        const getColor = () => {
          switch (checking()){
             case 0: return "white";
             case 1: return "#beecc4";
             default: return "#ecbec2"
          }  
        }  

        return (
          <Fragment>  
            <table style={{background: getColor()}}>
              <tbody>
              {  
                items.map(({id, item, selected}) => (
                  <tr key={id}>
                    <td>{item}</td>
                    <td>
                      <input id={id}
                        type="checkbox"
                        checked={selected}
                        onChange={handleChange}
                      />
                    </td>
                  </tr>
                ))
              }
              </tbody>
            </table>
          <button onClick={handleClick}>check</button>
        </Fragment>  
        )
      }

      const App = () => {
        return (
          <Table data={data}/>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

В обычном JS думаю что querySelectorAll cможет их всех выбрать подряд, далее дело за малым, пропустить это через цикл, посчитать количество непрерывных выделений(точнее выбранных чекбоксов перед которыми были не выбранные)

starts === 1 - условие соблюдено
starts > 1 - условие не соблюдено,
starts = 0 - ничего не выделено.

const btn = document.querySelector('#btn');
const checks = document.querySelectorAll('input[type=checkbox]');

btn.addEventListener('click', checkOneInterval, false);

function checkOneInterval(){
  let starts = 0;
  let beforeChk;
  Array.from(checks).forEach((chk, index) => {
    if (index === 0){
       starts = chk.checked ? 1 : 0;
    } else if (beforeChk.checked !== chk.checked && chk.checked === true){
       starts += 1
    }
    beforeChk = chk; 
  })  
  console.log('количество непрерывных выделений', starts)
}

<table>
  <tr><td><input type="checkbox"></td></tr>  
  <tr><td><input type="checkbox"></td></tr>  
  <tr><td><input type="checkbox"></td></tr>  
  <tr><td><input type="checkbox"></td></tr>
  <tr><td><input type="checkbox"></td></tr>
</table>
<button id=btn>check</button>

БЛОГ НА HUSL

Как узнать что отмеченные чекбоксы идут по порядку?

Ответы (1 шт):