How to change image on dynamic checkboxes?

Question

I'm new to JQuery and would really appreciate some help! I have dynamic checkboxes which has an icon and image on it (checkbox is hidden)...

 plcUserReq.Controls.Add(new LiteralControl("
<div data-toggle='buttons' style='margin-top:-3px'>
  <label class='btn' for='Lines' style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'>
     <input type='checkbox' autocomplete='off' name='chkbx' value='" + UID.ToString() + "'id='chk'"+ UID.ToString() + i.ToString() +"/>
           <i class='btn fa fa-plus-square-o' aria-hidden = 'true'>
                 <img src='http://localhost:3162/images/moderator-red.gif'></i></label></div>"));

I want the image and icon to change on click....when each checkbox is clicked...

This is the script I'm trying with...

$("[name='chkbx']").change(function () {
        if ($(this).is(':checked'))
            {
             $(this).next().find('i').attr('class', 'btn fa fa-check-square-o');
             $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
            }
        else
        {
            $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o');
            $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
        }
});

Nothing happens when any of the checkboxes are clicked...I can't seem to figure what the problem is with my JQuery.. Please help! I'm stuck!

JSFiddle : https://jsfiddle.net/Lgxacm9m/3/

When checked (it should look like this) : https://jsfiddle.net/m278c236/1/

nb1987 · Accepted Answer · 2017-12-09T19:10:48.483

0

In jQuery, the # is used for identifying elements by a certain id. Your checkbox does not have and id of chkbx, but rather it has a name of chkbx. So:

$("#chkbx").change(function() {

should be:

$("[name='chkbx']").change(function () {

EDIT: If the event still is not firing, it is possible that your event handler attempts to bind before the checkbox element is loaded into the DOM. You can resolve this by ensuring that the the code only executes once the entire page has been rendered. To accomplish this, edit your code as follows:

$(function() {
   $(document).on("change", "[name='chkbx']", change(function () {
      alert("At least the event is firing...");
      if ($(this).is(':checked'))
        {
          $(this).next().find('i').attr('class', 'btn fa fa-check-square-o');
          $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
        }
        else
        {
          $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o');
          $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
        }
   });
});

The $(function() { }) is shorthand for $(document).ready()

edited Dec 09 '17 at 19:10

answered Dec 09 '17 at 17:27

nb1987

1,400
1
11
12

Yes, I noticed this mistake...also I was using prev() instead of next()....Please check the edit. It's still not working! – AshleyR. Dec 09 '17 at 17:57
When you say it's not working, could you please elaborate? Is the event not firing? You could verify whether it's firing by adding `alert("It's firing at least.");` as the first line of code inside your event handler (before your `if` block). – nb1987 Dec 09 '17 at 18:01
Please see my edit. If it's still not firing even after implementing the change, I would guess that your content is being added to the DOM asynchronously. Another possibility is other syntax errors in your JavaScript code. In either case, please post your full JavaScript code and I can further assist. – nb1987 Dec 09 '17 at 18:17
Still, no go.. The checkboxes are dynamically generated (as per the rows in the database) and I've added this script in my Masterpage..(in the source...within script tags) – AshleyR. Dec 09 '17 at 18:57
I would recommend checking to see if you've got other JavaScript errors that are perhaps preventing your event handler from even binding in the first place. You can view errors in the browser by pressing F12 to bring up your browser's developer tools. The 'console' of the developer tools window pane will report any such errors. – nb1987 Dec 09 '17 at 19:16
Please check my edit. I've shared a link to JSFiddle – AshleyR. Dec 09 '17 at 20:11
Seems like the event does not get fired because the input tag is within the div? Something to do with data-toggle='buttons'? – AshleyR. Dec 09 '17 at 20:18
Thank you; the JSFiddle is helpful in determining a resolution. The event doesn't get fired because you're not actually interacting with the checkbox, which is hidden. I see in the JSFiddle that you are trying to bind a `change` event handler to the ``; however, `change` events are not associated with `` elements. Instead, you can bind a `click` event. https://jsfiddle.net/qjnrc4us/ is a JSFiddle which does what you want. It also checks and/or unchecks the checkbox programmatically, but uses the label class in the `if` condition to determine how to update the image and checkbox. – nb1987 Dec 10 '17 at 06:32
I see! Understood my mistake. Thanks a ton for your help! – AshleyR. Dec 10 '17 at 07:07

How to change image on dynamic checkboxes?

1 Answers1