JavaScript Checkboxy w select

pytanie zadane 19 września 2020 w HTML i CSS przez Misiek Mądrala (5,300 p.)

Witam mam taki kod gdzie w select mogę zaznaczyć checkboxy

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> </title> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        .multipleSelection { 
            width: 300px; 
            background-color: #BCC2C1; 
        } 
  
        .selectBox { 
            position: relative; 
        } 
  
        .selectBox select { 
            width: 100%; 
            font-weight: bold; 
        } 
  
        .overSelect { 
            position: absolute; 
            left: 0; 
            right: 0; 
            top: 0; 
            bottom: 0; 
        } 
  
        #checkBoxes { 
            display: none; 
            border: 1px #8DF5E4 solid; 
        } 
  
        #checkBoxes label { 
            display: block; 
        } 
  
        #checkBoxes label:hover { 
            background-color: #4F615E; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GEEKSFORGEEKS</h1> 
  
    <h2>Use CheckBox inside Select Option</h2> 
  
    <form> 
        <div class="multipleSelection"> 
            <div class="selectBox" 
                onclick="showCheckboxes()"> 
                <select> 
                    <option>Select options</option> 
                </select> 
                <div class="overSelect"></div> 
            </div> 
  
            <div id="checkBoxes"> 
                <label for="first"> 
                    <input type="checkbox" id="first" /> 
                    checkBox1 
                </label> 
                  
                <label for="second"> 
                    <input type="checkbox" id="second" /> 
                    checkBox2 
                </label> 
                <label for="third"> 
                    <input type="checkbox" id="third" /> 
                    checkBox3 
                </label> 
                <label for="fourth"> 
                    <input type="checkbox" id="fourth" /> 
                    checkBox4 
                </label> 
            </div> 
        </div> 
    </form> 
  
    <script> 
        var show = true; 
        var objectId = checkBoxes;
  
        function showCheckboxes() { 
            var checkboxes = document.getElementById('objectId'); 
  
            if (show) { 
                checkboxes.style.display = "block"; 
                show = false; 
            } else { 
                checkboxes.style.display = "none"; 
                show = true; 
            } 
        } 
    </script> 
</body> 
  
</html>

Pytanie mam jak zrobić żeby dodać klika taki selectów np w każdym wierszy tabeli i żeby funkcjonowały poprawnie.

2 odpowiedzi

odpowiedź 29 września 2020 przez VBService Ekspert (253,340 p.)
edycja 6 października 2020 przez VBService

Najlepsza

Taka "wariacja" na zadane pytanie. CodePen

<style>
:root {
  --select-size: 100px;
}
.demoSelect {
  width: 60vw;
  border: 1px solid black;
}
.demoSelect thead {
  border: 1px solid black;
  background-color: #29293d;
  color: white;
}
.demoSelect thead th, tbody td {
  text-align: center;
}
.demoSelect tbody tr:nth-child(odd) { 
  background-color: #b3b3cc;
}
.demoSelect tbody tr:nth-child(even) { 
  background-color: #d1d1e0;
}
.multiselect {
  width: var(--select-size);
}
.selectBox {
  position: relative;
}
.selectBox select {
  width: 100%;
  font-weight: bold;
}
.selectBox .selectOver {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
}
div[id^=checkboxes] {
  display: none;
  border: 1px #dadada solid;
  width: var(--select-size);
  text-align: left;
  background-color: #33334d;
  color: white;
}
div[id^=checkboxes] label {
  display: block;
}
div[id^=checkboxes] label:hover {
  background-color: #5c5c8a;
}
.buttons-row {  
  text-align: left;
}
.buttons-row button {
  margin: 0.3em 0;
  font: 0.9em monosapce;
  width: var(--select-size);
  cursor: pointer;
}
pre .checked {
  color: limegreen;
  background-color: black;
  padding: 0 0.2em;
}
pre .unchecked {
  color: orangered;
  background-color: black;
  padding: 0 0.2em;
}
</style>
<body>

<form>
  <table class="demoSelect">
    <thead>
      <tr>
        <th>Id</th>
        <th>Nazwa użytkownika</th>
        <th>Uprawnienia</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>Administrator</td>
        <td>
          <div class="multiselect">
            <div class="selectBox">
              <select>
                <option>Wybierz ...</option>
              </select>
              <div class="selectOver" id="select-box-1" data-expanded="false"></div>
            </div>
            <div id="checkboxes-1">
              <label for="admin-view">
                <input type="checkbox" id="admin-view" name="admin-view" value="admin-view" checked> Widok</label>
              <label for="admin-edit">
                <input type="checkbox" id="admin-edit" name"admin-edit" value="admin-edit" checked> Edycja</label>
              <label for="admin-delete">
                <input type="checkbox" id="admin-delete" name="admin-delete" value="admin-delete" checked> Usuń</label>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>2.</td>
        <td>Super użytkownik</td>
        <td>
          <div class="multiselect">
            <div class="selectBox">
              <select>
                <option>Wybierz ...</option>
              </select>
              <div class="selectOver" id="select-box-2" data-expanded="false"></div>
            </div>
            <div id="checkboxes-2">
              <label for="superuser-viwe">
                <input type="checkbox" id="superuser-viwe" name="superuser-view" value="superuser-view" checked> Widok</label>
              <label for="uperuser-edit">
                <input type="checkbox" id="superuser-edit" name="superuser-edit" value="superuser-edit" checked> Edycja</label>
              <label for="superuser-delete">
                <input type="checkbox" id="superuser-delete" name="superuser-delete" value="superuser-delete"> Usuń</label>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>3.</td>
        <td>Użytkownik</td>
        <td>
          <div class="multiselect">
            <div class="selectBox">
              <select>
                <option>Wybierz ...</option>
              </select>
              <div class="selectOver" id="select-box-3" data-expanded="false"></div>
            </div>
            <div id="checkboxes-3">
              <label for="user-view">
                <input type="checkbox" id="user-view" name="user-view" value="user-view" checked> Widok</label>
              <label for="user-edit">
                <input type="checkbox" id="user-edit" name="user-edit" value="user-edit"> Edycja</label>
              <label for="user-delete">
                <input type="checkbox" id="user-delete" name="user-delete" value="user-delete"> Usuń</label>
            </div>
          </div>
        </td>
      </tr>
      
      <!-- Demo -->
      <tr>
        <td></td>
        <td></td>
        <td class="buttons-row">
          <button type="button" id="test_checked" >Test</button>
        </td>
      </tr>      
    </tbody>
  </table>
</form>
<pre id="board"></pre>   
 
</body>
<script>
const select_boxes = document.querySelectorAll('[id^="select-box-"]');

select_boxes.forEach((select_box) => {
  select_box.addEventListener("click", ( {target} ) => {
    const id = target.id.replace('select-box-','checkboxes-');
    const checkboxes = document.getElementById(id);
    
    if (target.dataset.expanded == 'false') {
      checkboxes.style.display = "block";
      target.dataset.expanded = 'true';
    } else if (target.dataset.expanded == 'true') {
      checkboxes.style.display = "none"; 
      target.dataset.expanded = 'false';      
    }
    
    hideAllCheckboxesExceptCurrentView(target);
  })
})

function hideAllCheckboxesExceptCurrentView(target) {
  select_boxes.forEach((select_box) => {
      const id = select_box.id.replace('select-box-','checkboxes-');
      const checkbox = document.getElementById(id);     
    
      if(target.id != select_box.id) {
        checkbox.style.display = "none"; 
        select_box.dataset.expanded = 'false';
      }  
  })
}

// Test
//select_boxes[0].click(); // select-box-1
//select_boxes[1].click(); // select-box-2

const board = document.getElementById('board');
const b_test_checked = document.getElementById('test_checked');

b_test_checked.addEventListener('click', () => {
  let checkboxes = [];
  const checkboxes_checked = document.querySelectorAll('input[type=checkbox]:checked');  
  checkboxes_checked.forEach(checkbox => {
    checkboxes.push(checkbox.value);
  })
  
  let text ='\nTe checkbox-y są <span class="checked">zaznaczone</span>: \n';
  checkboxes.forEach((value, index) => {
    text += ` ${value},`;
    if (++index % 3 == 0) text += '\n';
  })
  
  checkboxes = [];
  const checkboxes_unchecked = document.querySelectorAll('input[type=checkbox]:not(:checked)');
  checkboxes_unchecked.forEach(checkbox => {
    checkboxes.push(checkbox.value);
  })
  
  text +='\nTe checkbox-y są <span class="unchecked">nie zaznaczone</span>: \n';
  checkboxes.forEach((value, index) => {
    text += ` ${value},`;
    if (++index % 3 == 0) text += '\n';
  })
  board.innerHTML = text;
})
</script>

komentarz 5 października 2020 przez Misiek Mądrala (5,300 p.)

super o to mi chodziło Wielkie Dzięki :)

komentarz 5 października 2020 przez VBService Ekspert (253,340 p.)
edycja 5 października 2020 przez VBService

Żeby można było z nich w pełni korzystać (checkbox-ów). Dodałem atrybuty name i value (przykładowe nazwy możesz użyć swoich), i tak np.:

<div id="checkboxes-1">
  <label for="admin-view">
    <input type="checkbox" id="admin-view" name="admin-view" value="admin-view" checked> Widok</label>
  <label for="admin-edit">
    <input type="checkbox" id="admin-edit" name"admin-edit" value="admin-edit" checked> Edycja</label>
  <label for="admin-delete">
    <input type="checkbox" id="admin-delete" name="admin-delete" value="admin-delete" checked> Usuń</label>
</div>

            <div id="checkboxes-2">
              <label for="superuser-view">
                <input type="checkbox" id="superuser-view" name="superuser-view" value="superuser-view" checked> Widok</label>
              <label for="superuser-edit">
                <input type="checkbox" id="superuser-edit" name="superuser-edit" value="superuser-edit" checked> Edycja</label>
              <label for="superuser-delete">
                <input type="checkbox" id="superuser-delete" name="superuser-delete" value="superuser-delete"> Usuń</label>
            </div>

... itd. CodePen

komentarz 6 października 2020 przez Misiek Mądrala (5,300 p.)

tak to już też dodałem w swoim kodzie te dwa parametry :)

a jeśli byłbyś miły jest taka opcja podpowiedź jak np zrobić jeśli kliknie się w jeden select to poprzedni zeby się zwijał samoczynnie bo teraz jest tak ze każdy się rozwija i zostaje w takiej pozycji dopiero drugi raz się go kliknie to się zwija :)

komentarz 6 października 2020 przez VBService Ekspert (253,340 p.)

... a jeśli byłbyś miły jest taka opcja podpowiedź jak np zrobić jeśli kliknie się w jeden select to poprzedni zeby się zwijał samoczynnie ...

Już dodałem do kodu tą "opcję" . Kod we wpisie uaktualniony i na CodePen też.

1	komentarz 7 października 2020 przez Misiek Mądrala (5,300 p.) super elegancko to działa tak jak chciałem jesteś mega Dziękuje za pomoc :) P.S muszę się w końcu zagłębić w tą javę żeby ogarniać samemu takie rzeczy :)