Remove attribute "checked" of checkbox

Question

I need remove the attribute "checked" of one checkbox when errors occur.

The .removeAttr function not work. Any idea? :/

HTML

<div data-role="controlgroup" data-type="horizontal" data-mini="true" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;">
    <input type="checkbox" id="captureImage" name="add_image" class="custom" />
    <label for="captureImage" data-icon="checkbox">Image</label>
    <input type="checkbox" id="captureAudio" name="add_audio" class="custom" />
    <label for="captureAudio" data-icon="checkbox">Audio</label>
    <input type="checkbox" id="captureVideo" name="add_video" class="custom" />
    <label for="captureVideo" data-icon="checkbox">Video</label>
</div>

Javascript

$("#captureImage").live("change", function() {
    // $("#captureImage").prop('checked', false); // Here Work

    if($("#captureImage:checked").val() !== undefined) {
            navigator.device.capture.captureImage(function(mediaFiles) {
            console.log("works");
        }, function(exception) {
            $("#captureImage").prop('checked', false); // Not Works Here
            _callback.error(exception);
        }, {limit: 1});
    }
});

/*
$("#captureAudio").live("change", function() {
    if($("#captureAudio:checked").val() !== undefined) {
            navigator.device.capture.captureAudio(function(mediaFiles) {
            console.log("audio");
        }, function() {
            $("#captureAudio").removeAttr('checked');
            _callback.error;
        }, {limit: 1});
    }
});

$("#captureVideo").live("change", function() {
    if($("#captureVideo:checked").val() !== undefined) {
            navigator.device.capture.captureVideo(function(mediaFiles) {
            console.log("video");
        }, function(exception) {
            $("#captureVideo").prop('checked', false);
            _callback.error(exception);
        }, {limit: 1});
    }
});
*/

$("#captureImage:checked").val() will always give you val on or off even you have not defined value for it — rajesh kakawat, Nov 26 '12 at 06:49
@rajeshkakawat No, $("#captureImage").val() is different of $("#captureImage:checked").val() — FabianoLothor, Nov 26 '12 at 07:26
Possible duplicate of [.prop('checked',false) or .removeAttr('checked')?](https://stackoverflow.com/questions/6169826/propchecked-false-or-removeattrchecked) — KyleMit, Nov 29 '17 at 18:43

score 111 · Answer 1 · answered Nov 26 '12 at 01:48

111

Try...

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

answered Nov 26 '12 at 01:48

alex

479,566
201
878
984

Not work in callback error function just work out captureImage function. – FabianoLothor Nov 26 '12 at 01:54

itsazzad · Answer 2 · 2016-07-21T03:42:09.763

72

Both of these should work:

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

AND/OR

$("#captureImage").removeAttr('checked');

... you can try both together.

edited Jul 21 '16 at 03:42

answered Dec 17 '14 at 09:09

itsazzad

6,868
7
69
89

Only the second option worked for me but I dont know why. Is it because I set the checked attribute with the attr method, like: radio.attr('checked', 'checked')? – Erik Čerpnjak Jan 21 '16 at 09:13
@ErikČerpnjak yes then – itsazzad Jan 21 '16 at 16:22
7

**NOTE** per [.prop('checked',false) or .removeAttr('checked')?](https://stackoverflow.com/q/6169826/1366033), that **`.prop( "checked", false )`** is always preferable to `.removeAttr( "checked" )` – KyleMit Nov 29 '17 at 18:43

score 9 · Answer 3 · answered Nov 27 '12 at 18:55

9

Try this to check

$('#captureImage').attr("checked",true).checkboxradio("refresh");

and uncheck

$('#captureImage').attr("checked",false).checkboxradio("refresh");

answered Nov 27 '12 at 18:55

A. Magalhães

1,511
2
22
31

score 5 · Answer 4 · answered Jun 19 '19 at 05:44

5

I use prop attribute for unchecked the checkbox when errors occur. You don't need to use remove property for unchecked your checkbox.

$('input#IDName').prop('checked', false);

It is working fine for me. Hope it will work for you also.

answered Jun 19 '19 at 05:44

Love Pandey

330
2
9

score 3 · Answer 5 · answered Nov 26 '12 at 02:08

3

Try:

$("#captureAudio")[0].checked = false;

answered Nov 26 '12 at 02:08

macool

659
6
11

I guess you are doing wrong the condition. Try: `if ( $("#captureImage")[0].checked )`. Avoid using those jQuery pseudo-selectors (`:checked`). – macool Nov 26 '12 at 02:37
@FabianoLothor also avoid raising Exceptions. Even something like `console.error` may crash your code. (It has happened to me) – macool Nov 26 '12 at 02:44
the condition is working properly. The problem is I can not run JQuery calls within the error function. – FabianoLothor Nov 26 '12 at 02:51
@FabianoLothor then, cache the variable. `captureImage = $("#captureImage")` (do it after the call to navigator). Then, in the callback function, just do: `captureImage[0].checked = false` – macool Nov 26 '12 at 02:58

score 3 · Answer 6 · edited Dec 01 '17 at 13:21

3

using .removeAttr() on a boolean attribute such as checked, selected, or readonly would also set the corresponding named property to false.

Hence removed this checked attribute

$("#IdName option:checked").removeAttr("checked");

edited Dec 01 '17 at 13:21

Machavity

30,841
27
92
100

answered Dec 01 '17 at 13:19

Sameena cat

31
1

score 3 · Answer 7 · answered Apr 07 '22 at 21:46

3

In case someone's looking for an answer using pure JavaScript:

const audioLabel = document.getElementById('captureAudio');

audioLabel.removeAttribute('checked');

answered Apr 07 '22 at 21:46

Davi Mello

349
4
6

score 2 · Answer 8 · answered Feb 09 '16 at 00:53

You could try $(this):

$("#captureAudio").live("change", function() {
    if($(this).val() !== undefined) { /* IF THIS VALUE IS NOT UNDEFINED */
            navigator.device.capture.captureAudio(function(mediaFiles) {
            console.log("audio");
        }, function() {
            $(this).removeAttr('checked'); /* REMOVE checked ATTRIBUTE; */
            /* YOU CAN USE `$(this).prop("checked", false);` ALSO */
            _callback.error;
        }, {limit: 1});
    }
});

score 0 · Answer 9 · answered Nov 26 '12 at 06:52

0

try something like this FIDDLE

    try
      {
        navigator.device.capture.captureImage(function(mediaFiles) {
        console.log("works");
         });
      }

    catch(err)
      {
        alert('hi');
        $("#captureImage").prop('checked', false);

      }

answered Nov 26 '12 at 06:52

rajesh kakawat

10,826
1
21
40

I try here, but, not entry on catch. :/ – FabianoLothor Nov 27 '12 at 00:17

score -7 · Accepted Answer · answered Nov 27 '12 at 00:36

Sorry, I solved my problem with the code above:

$("#captureImage").live("change", function() {
    if($("#captureImage:checked").val() !== undefined) {
        navigator.device.capture.captureImage(function(mediaFiles) {
            console.log("works");
        }, function(exception) {
            $("#captureImage").removeAttr('checked').checkboxradio('refresh');
            _callback.error(exception);
        }, {});
    }
});

Remove attribute "checked" of checkbox

10 Answers10

Linked

Related