Get TypeError: $(...)[0] is undefined

Question

My code calls an ajax script when a button is clicked. The ajax script is just returning a 0 or 1 at this point like this:

    $result = 1;
    echo json_encode($result);

The problem is with this line:

    $('.adt-checkbox_0')[0].prop("checked", result);

It gives the error

TypeError: $(...)[0] is undefined; can't access its "prop" property

The code seems to work but it looks like it runs twice since I get failures occasionally (error messages in the php code). If I remove the [0], as I've seen in some posts, the error goes away but the script doesn't work. I added the code below in jsfiddle but it doesn't work, I guess, due to the php function. Can someone explain what is wrong with that statement? Should I have a line checking if it exists? If so, how do I do that?

    <form>
    <tr> 
    <input type="hidden" name="pid-adt-checkbox_0" value="14" id="pid-adt-checkbox_0" /> 
    <td class="adt" id="adt-checkbox_0"><input type="checkbox" name="adt_check_0" /></td>
    </tr>
    <tr> 
    <input type="hidden" name="pid-adt-checkbox_1" value="15" id="pid-adt-checkbox_0" /> 
    <td class="adt" id="adt-checkbox_1"><input type="checkbox" name="adt_check_1" /></td>
    </tr>
    </form>


    <script>
    $(".adt").click(function(){

        var next_id = $(this).closest('td').attr('id') ;
        var pid_id = 'pid-'+next_id;
        var pid = $("#"+pid_id).val();  

        var dataArray = {};
        dataArray[0] = 'change_status';
        dataArray[1] = 'oID';
        dataArray[2] = pid;  

        $.ajax({
           type:  'POST',
           data:  dataArray ,
           async: false,
           url:"adt_ajax.php",
           dataType: 'json',
           success:function(result) {
             $('.adt-checkbox_0')[0].prop("checked", result);
           }
        });
        return false;      

    }); 
    </script>

Even if you found the element, what you are doing doesn't make sense. `prop()` is a jQuery method, not a native Element method. So doing `[0]` to break the Element out of the jQuery object doesn't make sense. — Taplar, Dec 06 '18 at 17:24
You shouldn’t need the `[0]` - most jQuery functions will work as you’d hope on a multiple selection — MTCoster, Dec 06 '18 at 17:26
Did you mean `$("[name=adt_check_0]").prop("checked",result=="true")` — mplungjan, Dec 06 '18 at 17:27
`$('.adt-checkbox_0')` doesn't exist. you meant `#` closetypo — Kevin B, Dec 06 '18 at 17:27
Taplar - I got the code I used from this page. https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery I have multiple checkboxes and only want to change one at a time. Is the example on that page incorrect? — user3052443, Dec 06 '18 at 17:45
MTCoster - I tried it without the [0]. the error didn't display but the code didn't work. mplungjan - I tried that code and it did the same as removing the [0] - no error but didn't work. Kevin B - .adt-checkbox_0 is the id of one of the boxes so it does exist. — user3052443, Dec 06 '18 at 17:48
In that case you want to use `eq(0)` to keep it as a jQuery object that has access to the `prop()` method — Taplar, Dec 06 '18 at 17:51
I'm not familiar with that command so I may not have added it correctly, but I used this: $('.adt-checkbox_0').eq[0].prop("checked", result); and the error is now TypeError: $(...).eq[0] is undefined; can't access its "prop" property — user3052443, Dec 06 '18 at 18:22

score 0 · Answer 1 · answered Dec 26 '18 at 02:17

The problems:

adt-checkbox_0 is not class but id, the fix change it to #adt-checkbox_0
adt-checkbox_0 is not input[type=checkbox] but td the fix: #adt-checkbox_0 input
using index [0] will return native JS object not jQuery, the fix: use .eq(0)

Solution if want to use the [0]

$('#adt-checkbox_0 input')[0].checked = result

using jQuery

$('#adt-checkbox_0 input').eq(0).prop("checked", result);

Get TypeError: $(...)[0] is undefined

1 Answers1