javascript - Checkbox onchange function - Stack Overflow

admin管理员组

文章数量:1415420

I have a page with a set of checkbox's, that I want to run a Javascript function on when there is a change (I have done something very similar with dropdown's - and that worked)

However with the checkbox's I have three problems:

1. my onChange event only runs "sometimes" (you have to change the focus between the different checkbox controls

2. when it does run it is returning the result of the previous checkbox (not the one just clicked on)

3. the jQuery always return the value true

Checkbox creation

<%= Html.CheckBox("sl-" + row.Id, value, new { onChange = "SuitabilityChecked("+row.Id+", "+key+")"})%>

Javascript

function SuitabilityChecked(providerId, parentRecordId) {
            var params = {};
            params.providerId = providerId;
            params.parentRecordId = parentRecordId;

            var value = $("#sl-" + providerId).val();               
            
            params.value = value;            
            $.getJSON("SuitabilityChecked", params, null);
        };

I have a page with a set of checkbox's, that I want to run a Javascript function on when there is a change (I have done something very similar with dropdown's - and that worked)

However with the checkbox's I have three problems:

1. my onChange event only runs "sometimes" (you have to change the focus between the different checkbox controls

2. when it does run it is returning the result of the previous checkbox (not the one just clicked on)

3. the jQuery always return the value true

Checkbox creation

<%= Html.CheckBox("sl-" + row.Id, value, new { onChange = "SuitabilityChecked("+row.Id+", "+key+")"})%>

Javascript

function SuitabilityChecked(providerId, parentRecordId) {
            var params = {};
            params.providerId = providerId;
            params.parentRecordId = parentRecordId;

            var value = $("#sl-" + providerId).val();               
            
            params.value = value;            
            $.getJSON("SuitabilityChecked", params, null);
        };

• javascript
• asp-mvc
• dom-events

Share Improve this question Follow edited Jul 16, 2020 at 10:30 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 2, 2010 at 0:35 Grayson MitchellGrayson Mitchell 1,18744 gold badges2424 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Browsers are funny about radio buttons and check boxes and can delay the onchange until focus change. Try adding an onclick event to blur or call the change event directly.

Maybe something like this using jQuery Live (untested, off the top of my head):

$(':checkbox').live('click', function() { $(this).change(); });

What's happening:

1. Checkbox A clicked
2. Checkbox B clicked
3. Checkbox A has lost focus and fires onChange

Which makes it seem as if Checkbox B is returning the result of Checkbox A. If you were to press Tab after clicking Checkbox B in this scenario, you'd notice that its onChange would fire.

本文标签： javascriptCheckbox onchange functionStack Overflow