2016-02-04 32 views
7

Sono sicuro che quello che sto cercando di fare è abbastanza semplice, ma ho bisogno di aiuto.Cambia radio bootstrap al momento del click

Ho tre pulsanti di opzione;

  • attiva
  • inattivo
  • non trovato

Id piace cambiare il (Bootstrap v3) classe dei pulsanti quando si fa clic. Hanno tutti una classe predefinita di btn-default. Tuttavia quando cliccato mi piacerebbe quindi avere le seguenti classi;

  • attivo (btn-success)
  • inattiva (btn-warning)
  • non trovato (btn-danger)

uno deve essere selezionata solo in qualsiasi momento, e solo uno dovrebbe essere colorato in uno qualsiasi tempo.

Il mio codice finora è sotto, penso di essere quasi arrivato. Se qualcuno potesse offrire qualche consiglio sarebbe bello.

Here is a link to my jsfiddle.

$(document).ready(function() { 
 

 
    $('#option1').change(function() { 
 
    $(this).removeClass("btn-default").addClass("btn-success"); 
 
    }); 
 
    $('#option2').change(function() { 
 
    $(this).removeClass("btn-default").addClass("btn-warning"); 
 
    }); 
 
    $('#option3').change(function() { 
 
    $(this).removeClass("btn-default").addClass("btn-danger"); 
 
    }); 
 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found 
 
    </label> 
 
</div>

+0

Se si esegue $ (this) .removeClass(); con i backets vuoti, cancella tutte le classi. Prova semplicemente $ (this) .removeClass(). AddClass ("newClass"). Questo dovrebbe funzionare – Fearodin

risposta

6

Si può avere un evento click su btn-default, invece, e avere un solo gestore:

JSFiddle

$(".btn-default").on("click", function() { 
 
    var classArr = ["btn-success", "btn-warning", "btn-danger"]; 
 
    $(".btn-default").removeClass(classArr.toString().replace(/,/g," ")); 
 
    var value = $(this).find("input[name='options']").val(); 
 
    $(this).addClass(classArr[value - 1]); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found 
 
    </label> 
 
</div>

+0

Decisione personalizzabile, perfetta e facile –

3

L'uomo, prima di tutto, si dovrebbe includere bootstrap.js dopo jquery.js
In secondo luogo, il vostro selettore seleziona elemento secondario, ma è necessario cambiare classe di genitore. Quindi è necessario utilizzare parent() qui

seguente snippet di codice:

$(document).ready(function() { 
 

 
    $('[id^="option"]').change(function() { 
 
    $('.btn-group > label').removeClass().addClass('btn btn-default'); 
 
    }); 
 

 
    $('#option1').change(function(){ 
 
    $(this).parent().removeClass('btn-default').addClass("btn-success"); 
 
    }); 
 

 
    $('#option2').change(function(){ 
 
    $(this).parent().removeClass('btn-default').addClass("btn-warning"); 
 
    }); 
 

 
    $('#option3').change(function(){ 
 
    $(this).parent().removeClass('btn-default').addClass("btn-danger"); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found 
 
    </label> 
 
</div>

3

Il codice che avete non cambia le classi, perché ci si rivolge gli elementi sbagliati. Tuttavia, le altre risposte non hanno tenuto conto del fatto che si desidera colorarne solo una alla volta. È sufficiente includere le classi di rimozione e aggiungere nuovamente le classi predefinite alle modifiche di ciascuna. Prova questo:

$(document).ready(function() { 

    $('#option1').change(function() { 
    $(this).parent().removeClass("btn-default").addClass("btn-success"); 
    $('#option2').parent().removeClass("btn-warning").addClass("btn-default"); 
    $('#option3').parent().removeClass("btn-danger").addClass("btn-default"); 
    }); 

    $('#option2').change(function() { 
    $(this).parent().removeClass("btn-default").addClass("btn-warning"); 
    $('#option1').parent().removeClass("btn-success").addClass("btn-default"); 
    $('#option3').parent().removeClass("btn-danger").addClass("btn-default"); 
    }); 

    $('#option3').change(function() { 
    $(this).parent().removeClass("btn-default").addClass("btn-danger"); 
    $('#option1').parent().removeClass("btn-success").addClass("btn-default"); 
    $('#option2').parent().removeClass("btn-warning").addClass("btn-default"); 
    }); 
}); 
+0

Non sono riuscito a includere .parent() all'opzione 3, ho modificato l'errore ora. – BroDev

1

Il problema è you'r vincolante il gestore di eventi modifica alle input 's, ma i <label>' s sono quelli che sono arredate con btn-default.

Modificare i riferimenti a $(this) a $(this).parent() e funzionerà come previsto.

3
$(document).ready(function() { 

$('#option1 ,#option2, #option3').change(function() { 
    $('#option1').parent().removeClass('btn-success').addClass("btn-default") 
    $('#option2').parent().removeClass('btn-warning').addClass("btn-default") 
    $('#option3').parent().removeClass(' btn-danger').addClass("btn-default"); 

    if($(this).attr('id') == 'option1') 
     $(this).parent().removeClass("btn-default").addClass("btn-success"); 
    else if($(this).attr('id') == 'option2') 
     $(this).parent().removeClass("btn-default").addClass("btn-warning"); 
    else 
     $(this).parent().removeClass("btn-default").addClass("btn-danger"); 
    }); 
}); 

Rimuovere tutte le classi attualmente applicate, una volta fatto, capire quale pulsante è stato cliccato e applicare che le opzioni CSS.Per quanto riguarda il motivo per cui il CSS non stava cambiando, non era il targeting delle etichette in cui è stato applicato btn- "inserire lo stile del pulsante di bootstrap qui", chiamando parent(), si sale al livello che controllava il CSS.

Inoltre, generalizzare la rimozione:

$(document).ready(function() { 

    $('#option1 ,#option2, #option3').change(function() { 
    removeAll() 
}); 

$('#option1').change(function() { 
    $(this).parent().removeClass("btn-default").addClass("btn-success"); 
}); 

$('#option2').change(function() { 
    $(this).parent().removeClass("btn-default").addClass("btn-warning"); 
}); 

$('#option3').change(function() { 
    $(this).parent().removeClass("btn-default").addClass("btn-danger"); 
}); 

}); 

function removeAll() 
{ 
    $('#option1').parent().removeClass('btn-success').addClass("btn-default"); 
    $('#option2').parent().removeClass('btn-warning').addClass("btn-default"); 
    $('#option3').parent().removeClass(' btn-danger').addClass("btn-default"); 
}; 
+0

Mi piace questo approccio usando if/else! Come si differenzia dalle altre risposte? È utile in qualche modo? –

+0

@johnny_s Non sono sicuro se c'è qualche vantaggio, solo un codice molto più ordinato in quanto è tutto isolato all'interno di una modifica. Dovresti controllare/rimuovere il CSS dagli altri pulsanti, ha senso non duplicare il codice. –

+0

@ La risposta aggiuntiva potrebbe essere un'opzione migliore. –

1

In secondo luogo, il vostro selettore seleziona elemento secondario, ma è necessario cambiare classe di genitore. Quindi è necessario utilizzare parent() qui

Per ottenere solo uno per essere attivato, è necessario rimuovere la classe da un altro pulsante. questo è il codice

$('.btn').removeClass().addClass('btn').addClass('btn-default'); 

$(document).ready(function() { 
 
    $('#option1').change(function() { 
 
    $('.btn').removeClass().addClass('btn').addClass('btn-default'); 
 
    $(this).parent().removeClass("btn-default").addClass("btn-success"); 
 
    }); 
 
    $('#option2').change(function() { 
 
    $('.btn').removeClass().addClass('btn').addClass('btn-default'); 
 
    $(this).parent().removeClass("btn-default").addClass("btn-warning"); 
 
    }); 
 
    $('#option3').change(function() { 
 
    $('.btn').removeClass().addClass('btn').addClass('btn-default'); 
 
    $(this).parent().removeClass("btn-default").addClass("btn-danger"); 
 
    }); 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive 
 
    </label> 
 
    <label class="btn btn-default"> 
 
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found 
 
    </label> 
 
</div>

3

Si potrebbe usare Custom Data Attribute come questo

$('.btn').click(function() { 
 
    var btn = $(this).data('btn'); 
 
    $(this).addClass(btn).removeClass('btn-default'); 
 
    $(this).siblings().each(function() { 
 
    $(this).removeClass($(this).data('btn')).addClass('btn-default'); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-default" data-btn="btn-success"> 
 
    <input type="radio" name="options" id="option1" value="1" autocomplete="off">Active 
 
    </label> 
 
    <label class="btn btn-default" data-btn="btn-warning"> 
 
    <input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive 
 
    </label> 
 
    <label class="btn btn-default" data-btn="btn-danger"> 
 
    <input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found 
 
    </label> 
 
</div>

Problemi correlati