javascript - Checkbox confirm message - Remain checked if false - Stack Overflow

admin管理员组

文章数量:1278856

I am currently trying to add a JavaScript confirm message when a user attempts to deselect an option.

If a user selects cancel on the confirm screen the check box should remain ticked. The problem I am having is that the check box bees unchecked even if I return false.

Code example can be found here /

HTML

<div class="ServiceDesc Alternate">    
    <span class="expandable">
        <input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
    </span>                
</div>​

JQuery

$(document).ready(function () {
        //each load to persist state
        $('.expandable').each(function () {
            ToggleCheckboxes($(this),false);
        });
        $('.expandable').click(function () {
            ToggleCheckboxes($(this),true);
        });
    });
    //toggle child checkbox show/hide
    function ToggleCheckboxes(checkboxSpan, showConfirm) {
        if (checkboxSpan.find(':checked').length > 0) {
            checkboxSpan.parent().find('.indent').show();
        }
        else {
            if (showConfirm) {
                var answer = confirm("Are you sure?");
                if (answer) {
                    checkboxSpan.parent().find('.indent').hide();
                }
                else {
                    return false;
                }
            }
            else {checkboxSpan.parent().find('.indent').hide();}
        } 
    }​

I am currently trying to add a JavaScript confirm message when a user attempts to deselect an option.

If a user selects cancel on the confirm screen the check box should remain ticked. The problem I am having is that the check box bees unchecked even if I return false.

Code example can be found here http://jsfiddle/Amjzv/

HTML

<div class="ServiceDesc Alternate">    
    <span class="expandable">
        <input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
    </span>                
</div>​

JQuery

$(document).ready(function () {
        //each load to persist state
        $('.expandable').each(function () {
            ToggleCheckboxes($(this),false);
        });
        $('.expandable').click(function () {
            ToggleCheckboxes($(this),true);
        });
    });
    //toggle child checkbox show/hide
    function ToggleCheckboxes(checkboxSpan, showConfirm) {
        if (checkboxSpan.find(':checked').length > 0) {
            checkboxSpan.parent().find('.indent').show();
        }
        else {
            if (showConfirm) {
                var answer = confirm("Are you sure?");
                if (answer) {
                    checkboxSpan.parent().find('.indent').hide();
                }
                else {
                    return false;
                }
            }
            else {checkboxSpan.parent().find('.indent').hide();}
        } 
    }​

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 28, 2012 at 8:57 benni_mac_bbenni_mac_b 8,88755 gold badges4242 silver badges6060 bronze badges 1

• Thanks for all the answers. All were valid but the accepted answer fixed the issue with the least effort. – benni_mac_b Commented Mar 28, 2012 at 12:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Simplest Way

$("#ctl01_chk").click(function() {
    if(confirm("Are you sure?")) { 
           // continue;
    } else { 
       return false;
    } 
});

Demo

You need to use preventDefault() rather than returning false ... you can do this by passing the event to the function that shows the confirm

$(document).ready(function () {
    //each load to persist state
    $('.expandable').each(function () {
        ToggleCheckboxes($(this),false);
    });
    $('.expandable').click(function (event) {
        ToggleCheckboxes($(this),true,event);
    });
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm,event) {
    if (checkboxSpan.find(':checked').length > 0) {
        checkboxSpan.parent().find('.indent').show();
    }
    else {
        if (showConfirm) {
            var answer = confirm("Are you sure?");
            if (answer) {
                checkboxSpan.parent().find('.indent').hide();
            }
            else {
                event.preventDefault();
            }
        }
        else {checkboxSpan.parent().find('.indent').hide();}
    } 
}​

Working example here

you should pass the click eventObject to your function so you can do

e.preventDefault();

Here's an update

You are returning false inside your custom function, but not inside the function assigned to the click event. just fix the following line:

$('.expandable').click(function () {
    return ToggleCheckboxes($(this),true);
});

本文标签： javascriptCheckbox confirm messageRemain checked if falseStack Overflow