How to remove checked attr on a checkbox when I click it again

Question

How can I do this : $(".continuar").removeClass("ver"); when I click one checkbox but I click it again to remove the checked?

I mean when I click one checkbox the button next appears and if I click the second checkbox it changes to checked but I want this : when I click the first or second checkbox again to uncheck I want the button to disappear.

This is exactly what I want: check box 1 unchecked = $(".continuar").addClass("ver"); and the same on check box 2 unchecked = $(".continuar").addClass("ver");

I'm talking about this button

<div class='continuar'>
    <input type="button" onclick="siguiente()" value="Continuar" class="boton" />
</div>
<input class="opc1" type="checkbox" value="1" onClick="Califica(1)" />
<input class="opc2" type="checkbox" value="2" onClick="Califica(2)" />

function Califica(opc) {
    $(".continuar").addClass("ver");
    respuestas[pMin]=opc;

    if (opc==1) {
        $("#p"+pMin+" .respuesta .opciones .opc1").attr('checked', true);
        $("#p"+pMin+" .respuesta .opciones .opc2").attr('checked', false);
    } else if (opc==2) {
        $("#p"+pMin+" .respuesta .opciones .opc1").attr('checked', false);
        $("#p"+pMin+" .respuesta .opciones .opc2").attr('checked', true );
    } else if(opc == 1 || opc == 2) {
        $("#p"+pMin+" .respuesta .opciones .opc1").removeAttr('checked');
        $("#p"+pMin+" .respuesta .opciones .opc2").removeAttr('checked');
     }
}

I tried to do this with Netzach comment but it didn't work

function Califica(opc){

    $(".continuar").addClass("ver");
    respuestas[pMin]=opc;
    if (opc==1){
        $("#p"+pMin+" .respuesta .opciones .opc1").attr('checked', true); 
        $("#p"+pMin+" .respuesta .opciones .opc2").attr('checked', false);
        $('.opc1').on("click",function(){



if($(this).attr('checked')) { 
$('.button').show();
 }else{
   $('.button').hide();
  }
});

    }else if (opc==2){
        $("#p"+pMin+" .respuesta .opciones .opc1").attr('checked', false);
        $("#p"+pMin+" .respuesta .opciones .opc2").attr('checked', true );  
        $('.opc2').on("click",function(){


 if($(this).attr('checked')) {
    $('#button').hide();
  }
});     
        }
        }

Side note: How would the final else if condition ever be reached? — devlin carnate, Nov 23 '15 at 16:08
Please clarify - you intend for one action to occur on the first click (remove class) and then a second action to occur on the second click (uncheck checkbox). What should happen on the third and subsequent clicks? — devlin carnate, Nov 23 '15 at 16:09
on the first click I want to check the checkbox because the button will appear but on second click I want to remove the button — JorgeAlberto, Nov 23 '15 at 16:19
@asd i am currently unclear of what you are asking, but i believe many SO users and myself can help you with your problem. if you could clarify what you want to implement by organizing your question as follows, we'd be happy to help you out: "check box 1 checked = what functionality, check box 1 unchecked = what functionality, checkbox 2 checked = what functionality, checkbox 2 unchecked = what functionality, and any combination case of the checkboxes that alters functionality". thanks. — indubitablee, Nov 23 '15 at 16:49
First of all thanks to all that want to help me and of course brother I want only the check box 1 unchecked and checkbox 2 unchecked and this is exactly: check box 1 unchecked = $(".continuar").addClass("ver"); and the same on check box 2 unchecked = $(".continuar").addClass("ver"); — JorgeAlberto, Nov 23 '15 at 16:55

score 1 · Answer 1 · answered Nov 23 '15 at 16:39

I am not sure what you mean, but if i understand you correct you looking for something like this:

button{
  display:none;
}
input:checked + input:checked + button{
  display:block !important;
}

Please accept the terms of Conditions<input type="checkbox">
and the License Agreement<input type="checkbox">, thanks!
<button>Thanks, proceed &raquo;</button>

Netzach · Accepted Answer · 2015-11-23T17:04:26.003

0

If you click an input, you need know if is checked or not. Your button init $('#button').hide(); or display:none.

<div id="button" style="display:none;">YOUR BUTTON</div>

<input class="opc1" type="checkbox" value="1" />
<input class="opc2" type="checkbox" value="2" />

$('.opc1').on("click",function(){
  if($(this).prop('checked')) {
    $('#button').show();
  }else{
   $('#button').show();
  }
});
$('.opc2').on("click",function(){
  if($(this).prop('checked')) {
    $('#button').hide();
    //Also you can use $('#button').remove(); but if you need show this before don't remove.
  }
});

edited Nov 23 '15 at 17:04

answered Nov 23 '15 at 16:50

Netzach

321
2
13

I don't use id bro I use class is it the same?

– JorgeAlberto Nov 23 '15 at 16:57
is not the same, but if is just an element is better use id. ID = SINGULAR ELEMENT CLASS = PLURAL ELEMENTS The checkbox should be id Just replace the "#" for "." – Netzach Nov 23 '15 at 17:03
It worked, thank you so much – JorgeAlberto Nov 23 '15 at 18:35

How to remove checked attr on a checkbox when I click it again

2 Answers2