Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

i want do something like this with a checkBox. if the user clicks on the checkbox, it should change its state (checked -> unchecked and vv. ).

my code:

$('#checkBoxStandard').change(function() {
    clickedFormBoxen('standard');
});


function clickedFormBoxen(active){
if(active == 'standard'){

    if( $('#checkBoxStandard').is(":checked")){

        $('#checkBoxStandard').prop("checked", false);

    }else{

        $('#checkBoxStandard').prop("checked", true);
    }

    console.log('ac: '+$('#checkBoxStandard').is(':checked'));
}

Unfortunately, the checkbox will not be unchecked again. The fist time, the checkbox is getting checked, but if i click on it again, nothing happens, it's still checked.

I wish to use this code so i can change the state of the checkbox by function call and not just by user interaction.

Please help me and sorry for my english^^

share|improve this question
as far as i can see, you revert the change of user action that causes the change event to fire. how do you set the initial state of the checkbox ? – collapsar Jul 11 at 18:09

3 Answers

up vote 1 down vote

Try 

$('#checkBoxStandard').removeAttr("checked");
share|improve this answer
2  
manipulationg the checked attribute is officially discouraged. – collapsar Jul 11 at 18:07
up vote 0 down vote

You mean something like this? (jsFiddle)

HTML

<input type="checkbox" id="checkbox">
<label for="checkbox">Hey,check me!</label>

JavaScript

var respond = true;

function manualCheck(state)
{
    respond = false;
    $('#checkbox').prop("checked", state);
}

$('#checkbox').change(function ()
{
    if (!respond)
    {
        respond = true;
        return;
    }

    // Your code
}
share|improve this answer
up vote 0 down vote

As i've mentionend in my comment to your question, with your function clickedFormBoxen you effectively revert the effect of a user interaction on the checkbox element. Thus it seems that you have to call the change handler from a click handler on your checkbox element (i've streamlined the code a bit):

function clickedFormBoxen(active) {
    if (active == 'standard') {
        $('#checkBoxStandard').prop("checked", !($('#checkBoxStandard').prop("checked")));
    }
}

$(document).ready( function(){
    $('#checkBoxStandard').change( function(e) {
        clickedFormBoxen('standard');
        1;
    });

    $('#checkBoxStandard').click(function(e) {
        $('#checkBoxStandard').change();
        1;
    });
});
share|improve this answer
Now i have the "problem" that the "clickedFormBoxen" is called 2times in one click. Im Having the clickevent like you said with click&change. function clickedFormBoxen(active){if(active == 'standard'){ $('#checkBoxStandard').prop("checked", !($('#checkBoxStandard').prop("checked"))); if( $('#checkBoxStandard').is(":checked")){ form = active; }else{ form = null; } } console.log("mhh: "+form); – Mich Ael Jul 12 at 8:07
that's by design. One call to clickedFormBoxen reverts the checkbox toggle by user action, the second performs the change. setting the checkboxes programmatically causes only 1 call because there is no click event. you have (at least) 2 options to get rid of the extra call: preventing the automatic toggle after a user click (which i haven't yet found a method for) or triggering a click event instead of setting the checkbox state programmatically (which i don't know whether or not it fits into your overall application design). – collapsar Jul 12 at 10:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.