Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde. Utilizo os seguintes códigos para selecionar os itens e limpar os dados.
Html
<div class="clearfix">
<div class="col-md-2">
<select class="form-control" name="itens" id="itens" multiple="">
<option></option>
<option value="SC"> SC </option>
<option value="PR"> PR </option>
<option value="RS"> RS </option>
<option value="SP"> SP </option>
<option value="RJ"> RJ </option>
<option value="TO"> TO </option>
<option value="AM"> AM </option>
</select>
</div>
</div>
<div class="clearfix">
<label> Tipo 1 - SC PR
<input type="radio" value="1" id="radio1" class="radio1" name="radio">
</label>
</div>
<div class="clearfix">
<label> Tipo 2 - SP RJ
<input type="radio" value="2" id="radio2" class="radio2" name="radio">
</label>
</div>
<div class="clearfix">
<label> Limpar
<input type="radio" value="2" id="radio3" class="radio3" name="radio">
</label>
</div>
Jquery
$(document).ready(function(){
$('.radio1').click(function(){ // Tipo 1
$('#itens option[value=SC]').attr('selected','selected'); // seleciona uf SC
$('#itens option[value=PR]').attr('selected','selected'); // seleciona uf PR
});
$('.radio2').click(function(){ // Tipo 2
$('#itens option[value=SP]').attr('selected','selected'); // seleciona uf SP
$('#itens option[value=RJ]').attr('selected','selected'); // seleciona uf RJ
});
$('.radio3').click(function(){ // Limpar
$("option:selected").removeAttr("selected");
});
});
O meu problema é que quando eu clico em limpar e logo em seguida tento selecionar o input radio 1 ou o 2, eles não funcionam mais, só seleciona se for caso a caso.
Alguém sabe como me ajudar?@William Bruno, o problema de utilizar assim, é que meu campo é de multipla escolha, tanto que no exemplo eu atribuo cada radio a 2 estados.
Resolvido.
Como eu utilizo uma classe do Bootstrapp multiselect(), acabei encontrando no próprio site uma função para realizar o que eu queria.
O código está abaixo.
<section class="container">
<div class="example">
<div class="btn-group">
<div class="btn-group">
<select id="example-select" multiple="multiple">
<option selected="select" value="1"> Option 1 </option>
<option selected="select" value="2"> Option 2 </option>
<option selected="select" value="3"> Option 3 </option>
<option selected="select" value="4"> Option 4 </option>
<option selected="select" value="5"> Option 5 </option>
<option selected="select" value="6"> Option 6 </option>
</select>
<button id="example-select-button" class="btn btn-default"> Selecionar </button>
</div>
</div>
</div>
</section>
JS
<script type="text/javascript">
$(document).ready(function(){
$('#example-select').multiselect();
$('#example-select-button').on('click', function() {
$('#example-select').multiselect('deselect', ['1', '2', '3','4','5','6']);
$('#example-select').multiselect('select', ['1', '2', '4']);
});
});
</script>