Como fazer checkbox (Ajuda a repetir botões checkbox)

<form method="post" action="php/opcoes.php" id="myForm">



<input class="form-control" readonly="readonly" id="esconder" type="text" name="id" value="<?php echo $id; ?>">

<input class="form-control" readonly="readonly" id="esconder" type="text" name="apto" value="<?php echo $apto; ?>">

<!--<input class="form-control" readonly="readonly" id="esconder" type="text" name="busca" value="<?php echo $busca; ?>">-->



<label class="">

    <?php if($id == $id and $busca == $apto && $sujo == 1 ){

    ?>

    <div class="switch__container">Sujo

      <input id="switch-shadow" class="switch switch--shadow" name="sujo" value="0" type="checkbox" onclick="myFun()" checked>

      <label for="switch-shadow"></label>

      </div>

      <?php

  }else if ($id == $id and $busca == $apto && $sujo == 0){

      ?>

      <div class="switch__container">Sujo

      <input id="switch-shadow" class="switch switch--shadow" name="sujo" value="1" type="checkbox" onclick="myFun()">

      <label for="switch-shadow"></label>

      </div>

      <?php

  }?>

</label>



<label class="">

    <?php if($id == $id and $busca == $apto && $exc == 3){

    ?>

    <div class="switch__container">Exc

      <input id="switch-shadow" class="switch switch--shadow" name="exc" value="2" type="checkbox" onclick="myFun2()" checked>

      <label for="switch-shadow"></label>

      </div>

      <?php

  }else if ($id == $id and $busca == $apto && $exc == 2){

      ?>

      <div class="switch__container">Exc

      <input id="switch-shadow" class="switch switch--shadow" name="exc" value="3" type="checkbox" onclick="myFun2()">

      <label for="switch-shadow"></label>

      </div>

      <?php

  }?>

</label>

<input id="switch-shadow" class="switch switch--shadow" name="check[]" value="1" type="checkbox" onclick="myFun()">

O que você espera conseguir com a comparação $id == $id ? – É claro que variáveis sempre serão iguais a elas mesmas! - Ou acha que não?

esquiloesperto disse:

>>
CSS não causa problemas de comportamento na página porque só trabalha o estilo, é comparável às roupas das pessoas numa festa.

O seu maior problema é com o "id" de cada elemento ▻ ID está para "identidade", por isto deve ser único tal como as Carteiras de Identidade de cada pessoa na festa. Pessoas diferentes podem ter CIs iguais? óbvio que não, né! - Em HTML a propriedade "class" pode ser compartilhada para diversos propósitos "de um determinado grupo de elementos", enquanto a "id" é única: uma por elemento na página.
Os "labels" referenciam elementos diferenciando-os pelo seu "id" individual... Qual é o grau de confusão que você acha que vai produzir no navegador quando um label ou o JS precisarem encontrar algum elemento pelo seu ID mas encontram muitos deles ao invés de um só? - Difícil né!

Até aqui falei de "id" em Html, agora vamos ao $id no PHP:

O que você espera conseguir com a comparação $id == $id ? – É claro que variáveis sempre serão iguais a elas mesmas! - Ou acha que não?

Da mesma forma, no JS as funções myFun e myFun2 são exatamente iguais. Então não precisa duas, porque uma dará conta do serviço.
- Além do mais elas remetem o formulário e alteram o BD... Ora, e se o usuário clicar por engano? E ainda que seja voluntário, o formulário será remetido tão rápido que nem vai dar tempo de perceber o efeito CSS.

O excesso de código não diz que alguém sabe programar (muito pelo contrário ), então observe ali dentro dos blocos if/else que a única alteração acontece no "input", significando que todo o restante poderia ficar de fora.

Depois você batiza cada elemento com os "ids" de sua escolha, mas veja como deveria estar:

<form method="post" action="php/opcoes.php" id="myForm">



  <input readonly type="text" name="id" class="form-control" value="<?php echo $id; ?>">

  <input readonly type="text" name="apto" class="form-control" value="<?php echo $apto; ?>">

  <input readonly type="text" name="busca" class="form-control" value="<?php echo $busca; ?>">



  <?php if ($busca == $apto) {

    if ($sujo == 0 || $sujo == 1) {?>

    <!--Lógica 1 -- Se o apto estiver sujo/limpo exibe este botão ativado/desativado-->

    <div class="switch__container">Sujo

      <input id="sujo" name="sujo" type="checkbox" class="switch" <?php if ($sujo == 1){"value=0 checked"} else if ($sujo == 0) {"value=1"}?> >

      <label for="sujo"></label>

    </div>

    <?php }



    if($exc == 2 || $exc == 3){?>

    <!-- Lógica 2 -- Se a condição do apto for 'ext' exibe este botão ativado/desativado -->

    <div class="switch__container">Exc

      <input id="exc" name="exc" type="checkbox" class="switch" <?php if ($exc == 3){"value=2 checked"} else if ($exc == 2) {"value=3"}?> >

      <label for="exc"></label>

    </div>

    <?php }

  }?>



</form>



<button class="form-control" onclick="myFun()">Salvar</button>



<script>

  function myFun() {

    if (myForm.dataset.changed) myForm.submit();

    else (alert('Documento sem alterações.\nO formulário não será enviado.'));

  }

  function myFun2() {

    myForm.setAttribute('data-changed', true);

  }

  [...document.getElementsByClassName('switch')].forEach(

    (checkbox)=>checkbox.addEventListener('click',myFun2))

</script>

[code=CSS].form-control {
padding: 5px 20px;
}
.switch__container {
margin: 10px auto;
width: 50px;
}
.switch {
visibility: hidden;
position: absolute;
margin-left: 0px;
}
.switch + label {
width: 60px;
height: 30px;
padding: 2px;
outline: none;
display: block;
cursor: pointer;
position: relative;
user-select: none;
border-radius: 30px;
background-color: #ddd;
}
.switch + label:before,
.switch + label:after {
top: 1px;
left: 1px;
bottom: 1px;
content: "";
display: block;
position: absolute;
}
.switch + label:before {
right: 1px;
border-radius: 30px;
background-color: #f1f1f1;
transition: background 0.4s;
}
.switch + label:after {
width: 30px;
border-radius: 100%;
transition: all 0.4s;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.switch:checked + label:before {
background-color: #8ce196;
}
.switch:checked + label:after {
transform: translateX(32px);
}[/code]

<input id="sujo" name="sujo" type="checkbox" class="switch" <?php if ($sujo == 1){"value=0 checked"} else if ($sujo == 0) {"value=1"}?> >

esquiloesperto disse:

>>
CSS não causa problemas de comportamento na página porque só trabalha o estilo, é comparável às roupas das pessoas numa festa.

O seu maior problema é com o "id" de cada elemento ▻ ID está para "identidade", por isto deve ser único tal como as Carteiras de Identidade de cada pessoa na festa. Pessoas diferentes podem ter CIs iguais? óbvio que não, né! - Em HTML a propriedade "class" pode ser compartilhada para diversos propósitos "de um determinado grupo de elementos", enquanto a "id" é única: uma por elemento na página.
Os "labels" referenciam elementos diferenciando-os pelo seu "id" individual... Qual é o grau de confusão que você acha que vai produzir no navegador quando um label ou o JS precisarem encontrar algum elemento pelo seu ID mas encontram muitos deles ao invés de um só? - Difícil né!

Até aqui falei de "id" em Html, agora vamos ao $id no PHP:

O que você espera conseguir com a comparação $id == $id ? – É claro que variáveis sempre serão iguais a elas mesmas! - Ou acha que não?

Da mesma forma, no JS as funções myFun e myFun2 são exatamente iguais. Então não precisa duas, porque uma dará conta do serviço.
- Além do mais elas remetem o formulário e alteram o BD... Ora, e se o usuário clicar por engano? E ainda que seja voluntário, o formulário será remetido tão rápido que nem vai dar tempo de perceber o efeito CSS.

O excesso de código não diz que alguém sabe programar (muito pelo contrário ), então observe ali dentro dos blocos if/else que a única alteração acontece no "input", significando que todo o restante poderia ficar de fora.

Depois você batiza cada elemento com os "ids" de sua escolha, mas veja como deveria estar:

<form method="post" action="php/opcoes.php" id="myForm">



  <input readonly type="text" name="id" class="form-control" value="<?php echo $id; ?>">

  <input readonly type="text" name="apto" class="form-control" value="<?php echo $apto; ?>">

  <input readonly type="text" name="busca" class="form-control" value="<?php echo $busca; ?>">



  <?php if ($busca == $apto) {

    if ($sujo == 0 || $sujo == 1) {?>

    <!--Lógica 1 -- Se o apto estiver sujo/limpo exibe este botão ativado/desativado-->

    <div class="switch__container">Sujo

      <input id="sujo" name="sujo" type="checkbox" class="switch" <?php if ($sujo == 1){"value=0 checked"} else if ($sujo == 0) {"value=1"}?> >

      <label for="sujo"></label>

    </div>

    <?php }



    if($exc == 2 || $exc == 3){?>

    <!-- Lógica 2 -- Se a condição do apto for 'ext' exibe este botão ativado/desativado -->

    <div class="switch__container">Exc

      <input id="exc" name="exc" type="checkbox" class="switch" <?php if ($exc == 3){"value=2 checked"} else if ($exc == 2) {"value=3"}?> >

      <label for="exc"></label>

    </div>

    <?php }

  }?>



</form>



<button class="form-control" onclick="myFun()">Salvar</button>



<script>

  function myFun() {

    if (myForm.dataset.changed) myForm.submit();

    else (alert('Documento sem alterações.\nO formulário não será enviado.'));

  }

  function myFun2() {

    myForm.setAttribute('data-changed', true);

  }

  [...document.getElementsByClassName('switch')].forEach(

    (checkbox)=>checkbox.addEventListener('click',myFun2))

</script>

[code=CSS].form-control {
padding: 5px 20px;
}
.switch__container {
margin: 10px auto;
width: 50px;
}
.switch {
visibility: hidden;
position: absolute;
margin-left: 0px;
}
.switch + label {
width: 60px;
height: 30px;
padding: 2px;
outline: none;
display: block;
cursor: pointer;
position: relative;
user-select: none;
border-radius: 30px;
background-color: #ddd;
}
.switch + label:before,
.switch + label:after {
top: 1px;
left: 1px;
bottom: 1px;
content: "";
display: block;
position: absolute;
}
.switch + label:before {
right: 1px;
border-radius: 30px;
background-color: #f1f1f1;
transition: background 0.4s;
}
.switch + label:after {
width: 30px;
border-radius: 100%;
transition: all 0.4s;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.switch:checked + label:before {
background-color: #8ce196;
}
.switch:checked + label:after {
transform: translateX(32px);
}[/code]

function myFun2() {
myForm.setAttribute('data-changed', true);
}
[...document.getElementsByClassName('switch')].forEach(
(checkbox)=>checkbox.addEventListener('click',myFun2))

Experimentou adicionar as aspas simples?

<input id="sujo" name="sujo" type="checkbox" class="switch switch--shadow"

      <?php if ($sujo == 1){?> value='0' checked <?php } else if ($sujo == 0) {?> value='1' <?php }?> >