Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Erick Ferreira

generalizar funcao para checkboxs

Recommended Posts

Olá,

 

Tenho vários checkboxs que irei utilizar para mostrar status on/off de uma outra aplicação. Caso eu marque um checkbox, ele monta uma "msg" e envia por ajax para a determinado aplicação. Tentei fazer algo do tipo

<table id="tabelaLamp">
       <tr>
           <td>Lâmpada 1
               <span class="onoff">
               <label class="switch">
                   <input type="checkbox" id="lamp1" class="switch-input">
                   <span class="switch-label" data-on="On" data-off="Off"></span>
                   <span class="switch-handle"></span>
               </label>
               </span>
           </td>
       </tr>
       <tr>
           <td>Lâmpada 2
               <span class="onoff">
               <label class="switch">
                   <input type="checkbox" id="lamp2" class="switch-input">
                   <span class="switch-label" data-on="On" data-off="Off"></span>
                   <span class="switch-handle"></span>
               </label>
               </span>
           </td>
       </tr>
       <tr>
           <td>Lâmpada 3
               <span class="onoff">
               <label class="switch">
                   <input type="checkbox" id="lamp3" class="switch-input">
                   <span class="switch-label" data-on="On" data-off="Off"></span>
                   <span class="switch-handle"></span>
               </label>
               </span>
           </td>
       </tr>
       <tr>
           <td>Lâmpada 4
               <span class="onoff">
               <label class="switch">
                   <input type="checkbox" id="lamp4" class="switch-input">
                   <span class="switch-label" data-on="On" data-off="Off"></span>
                   <span class="switch-handle"></span>
               </label>
               </span>
           </td>
       </tr>
       <tr>
           <td>Lâmpada 5
               <span class="onoff">
               <label class="switch">
                   <input type="checkbox" id="checkTest" class="switch-input">
                   <span class="switch-label" data-on="On" data-off="Off"></span>
                   <span class="switch-handle"></span>
               </label>
               </span>
           </td>
       </tr>
   </table>
$(document).ready(function(){
    var aux;
    $("#lamp1").click(function(){
        if(!$("#lamp1").is(":checked")){
            aux = "000";
        }
        else{
            aux = "001"
        }
        $("#msg").text(aux);
    })
    $("#lamp2").click(function(){
        if(!$("#lamp2").is(":checked")){
            aux = "010";
        }
        else{
            aux = "011"
        }
        $("#msg").text(aux);
    })
    $("#lamp3").click(function(){
        if(!$("#lamp3").is(":checked")){
            aux = "020";
        }
        else{
            aux = "021"
        }
        $("#msg").text(aux);
    })
    $("#lamp4").click(function(){
        if(!$("#lamp4").is(":checked")){
            aux = "030";
        }
        else{
            aux = "031"
        }
        $("#msg").text(aux);
    })
    $("#checkTest").click(function(){
        if(!$("#checkTest").is(":checked")){
            aux = "040";
        }
        else{
            aux = "041"
        }
        $("#msg").text(aux);
    })
});

Acaba resolvendo o que eu queria, mas fiquei na dúvida se eu conseguiria diminuir as linhas de código no js, algo mais "genérico" e acabei não tendo idéia e resolvi pedir ajudar kkk

No caso do

$("#msg").text(aux)

utilizei apenas para teste. Alguma idéia para melhorar o código?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Coloca essa informação no html:

 

 <input type="checkbox" id="lamp4" class="switch-input" data-aux-on="30" data-aux-off="31">
E ai, fica assim o teu js:

$(document).ready(function(){
    var $msg = $("#msg");
    $('.switch-input').click(function(){
        var aux = $(this).is(':checked') ? $(this).attr('data-aux-on') : $(this).attr('data-aux-off');

        $msg.text(aux);
    });
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.