Grow your CSS skills. Land your dream job.

JQuery on checkbox check

  • # March 21, 2013 at 11:56 am

    I have been trying to get a delete button to appear only when a checkbox is checked.

    For some reason, I cannot get this to happen.

    I am using JQuery AJAX to fetch all the rows in a MySQL table and format it into an [li] element to create a list of post.

    Every [li] contains a [input type=”checkbox”] with a class=”select_post”. Each text box also has a value=”” of the post ID in the MySQL table.

    I’ve been trying to figure out how to find out if a checkbox is checked to have the delete post appear, but nothing goes.

    $(‘.checkbox’).click( function () {…}); – didn’t work
    $(‘.checkbox’).change( function () {…}); – didn’t work
    $(‘.checkbox’).mouseon( function () {…}); – didn’t work

    What is it that I am not doing right?

    This is the function that is “supposed” to let me know when a checkbox is checked.

    $(‘.select_post’).click( function () {
    alert(‘click’);
    $(‘#delete_post_button’).css(‘display’, ‘block’);
    });

    And just to understand the way I get and format that posts, here is my AJAX function…

    $(window).ready( loadPosts () );
    function loadPosts () {
    $.ajax({
    type: ‘POST’,
    url: ‘load_posts.php’,
    data: ”,
    dataType: ‘json’,
    success: function ( rows ) {
    $(‘#post_list’).empty();
    for ( var i in rows ) {
    var row = rows,
    id = row[0],
    date = row[1],
    title = row[2],
    postContent = ‘

  • ‘ +
    ‘ +
    ‘ +
    ‘ +
    ‘ +
    ‘ +

    ‘ +
    ‘ +

    ‘ +

  • ‘;
    $(‘#post_list’).append(postContent);
    }
    }
    });
    }

# March 21, 2013 at 12:03 pm

Check boxes are ‘checked’ when ‘selected’ aren’t they?

Thus “checked” is an attribute.

http://codepen.io/Paulie-D/pen/EdGzi

http://api.jquery.com/checked-selector/

# March 21, 2013 at 12:05 pm

Technically they are, but how do you always listen to all of the checkboxes in a list for when they change state ?

# March 21, 2013 at 12:09 pm

I have very little knowledge of Js/JQ but I would assume that you can apply any event handler to each/every ‘item’.

# March 21, 2013 at 12:21 pm

The problem is because you are injecting the checkboxes into the dom after the dom is ready, so any event handlers that you atatch on document ready will not get atatched to the ajax loaded content,

The quickest solution if you are using jQuery V1.7 or above is to use the .on() function, this will add event handlers to elements that already exist and/or are injected into the dom after the document is ready,

$(‘.select_post’).on(‘click’, function () {
alert(‘click’);
$(‘#delete_post_button’).css(‘display’, ‘block’);
});

# March 21, 2013 at 2:52 pm

Since the checkboxes are injected from AJAX, then you need to create a function to repeat the DOM catching (whatever) after the checkboxes element loaded. Like this:

function reInit() {
$('.select_post').on('click', function() {
alert('click');
$('#delete_post_button').css('display', 'block');
});
}
$.ajax({
type: 'POST',
url: 'load_posts.php',
data: '',
dataType: 'json',
success: function (rows) {

...
...

$('#post_list').append(postContent);
reInit(); // Re-init the function after `#post_list` has new checkboxes
}
});
# March 21, 2013 at 3:00 pm

Oh I see, so new elements loaded after the dom is loaded is no ‘Seen’ by the script. Nice one thank you guys!

# March 21, 2013 at 5:12 pm

@Hompimpa, you don’t need to re-call or even repeat the the function after the elements have been injected, the beauty of the .on() function is that it will attach the event hander to any existing or any element added to the dom that matches the selector,

@justinweb, the document.ready function you have posted also seems wrong to me, it may work but i’ve never seen a $(window).ready call used,

Try the following code should work,

$(document).ready(function(){

$(‘.select_post’).on(‘click’, function () {
alert(‘click’);
$(‘#delete_post_button’).css(‘display’, ‘block’);
});

$.post(‘load_posts.php’,function(rows){
$(‘#post_list’).empty();
$.each(rows,function(i){
var row = rows,
id = row[0],
date = row[1],
title = row[2],
postContent = ‘

  • ‘ +
    ‘ +
    ‘ +
    ‘ +
    ‘ +
    ‘ +

    ‘ +
    ‘ +

    ‘ +

  • ‘;
    $(‘#post_list’).append(postContent);
    });
    });

    });

    Viewing 8 posts - 1 through 8 (of 8 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".