detecting if checkbox was checked

Question

I had an assignment to make a To Do list in HTML/JS/CSS

I am allowed to make any aesthetic changes as I want as long as it has 3 things: a button that allows the user to input to the list, removing the button when there is no input (white space is not considered input) and the user should be able to click on something so the user can delete the task.

I was thinking of a check box that was clicked for more than 5 seconds. so far I got this:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="ToDo.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="ToDo.js"></script>
</head>


<body>
<h1>ToDo</h1>
<input type="checkbox"/>
<input type="text" placeholder="Please Enter a Task" id="input">
<input type="submit" value="Add" id="addButton" hidden="hidden">


</body>


</html>

And this is my JS file:

$(document).ready(function() {

    $("#input")[0].oninput = function isEmpty() {

        if ($("#input").val() == "") {
            $("#addButton").fadeOut(250);
        } else {
            $("#addButton").fadeIn(250);
        }
    }


    $("#addButton").click(function() {
        $("#addButton").after($("<p></p>").text($("#input").val()));
        //$("p:first").prepend('<input type="checkbox" value="102" name="tags[]" id="tag102" class="checkbox" />');
        $("#input").val("");
        $("#addButton").hide();
    });




    $('input[type=checkbox]').change(function() {
      if( $(this).is(':checked')) {
              alert("This passed");
          }else {
              alert("This failed");
          }


    });

});

I have a CSS files as well, but I am assuming that isn't important at the moment. I havn't started with the timer because I couldn't figure out how to check if the check box was checked. I tried using a regular HTML check box to check it out and that worked fine. but for some reason the ones crated through java script aren't working.

Please help, Thank you.

"I was thinking of a check box that was clicked for more than 5 seconds" - As in, the user would have to click and hold on the control for 5 seconds? Or as in, having checked the checkbox, nothing will happen unless the user doesn't uncheck it within 5 seconds? Either would result in a pretty non-standard user experience and I'd recommend against them (other than as a learning exercise for you to code). — nnnnnn
– nnnnnn, Commented Feb 9, 2017 at 2:44
"the ones crated through javascript aren't working." use $(document).on("change", "input[type=checkbox]", function() { /* code */ }) to bind event listeners to new elements. — Santiago Hernández
– Santiago Hernández, Commented Feb 9, 2017 at 2:47
@nnnnnn "having checked the checkbox, nothing will happen unless the user doesn't uncheck it within 5 seconds?" That was the one I was referring to. It is solely for a learning experience. Thank you for the heads up. — Edon Freiner
– Edon Freiner, Commented Feb 9, 2017 at 3:01

Pato Salazar · Accepted Answer · 2017-02-09 03:05:15Z

1

Just detect the existence of the checked property like this:

    $('input[type=checkbox]').change(function() {
      if( $(this).prop('checked')) {
              alert("This passed");
          }else {
              alert("This failed");
          }
    });
});

It should work :)

answered Feb 9, 2017 at 3:05

Pato Salazar

1,47712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yaakov · Accepted Answer · 2017-02-09 02:45:22Z

0

Use the .prop() function:

$('input[type=checkbox]').change(function() {
      if( $(this).prop('checked') == "checked") {
              alert("This passed");
          }else {
              alert("This failed");
          }


    });

answered Feb 9, 2017 at 2:45

yaakov

4,7274 gold badges29 silver badges55 bronze badges

Comments

Santiago Hernández · Accepted Answer · 2017-02-09 02:51:42Z

Use .on() to attach an event handler function for dynamic created elements

$(document).on('change','input[type=checkbox]', function() {
      if ($(this).is(':checked')) {
          alert("This passed");
      } else {
          alert("This failed");
      }
});

$(document).ready(function() {
    $(document).on('change','input[type=checkbox]', function() {
          if ($(this).is(':checked')) {
              alert("This passed");
          } else {
              alert("This failed");
          }
    });
});

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="ToDo.css" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="ToDo.js"></script>
</head>


<body>
<h1>ToDo</h1>
<input type="checkbox"/>
<input type="text" placeholder="Please Enter a Task" id="input">
<input type="submit" value="Add" id="addButton" hidden="hidden">


</body>


</html>

nnnnnn · Accepted Answer · 2017-02-09 03:32:13Z

"having checked the checkbox, nothing will happen unless the user doesn't uncheck it within 5 seconds"

The keys to implementing that sort of functionality (which, as I noted in a comment above will provide a non-standard user experience, so I don't recommend doing it other than for learning purposes) are the setTimeout() function, which lets you schedule a function to be called after a specified delay, and the clearTimeout() function, which lets you cancel a previously scheduled timeout. You'd use them with a checkbox event handler as follows:

var timeoutId;
$("input[type=checkbox]").on("click", function(e) {
  if (this.checked) {
    timeoutId = setTimeout(function() {
      alert("Time up! Do something here...");
    }, 5000); // delay in milliseconds
  } else {
    clearTimeout(timeoutId);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input type="checkbox"> Check me (and wait five seconds, or uncheck me)</label>

Note that for checkboxes I would recommend using the click event rather than the change event, because in some older browsers "clicking" the checkbox via the keyboard does not result in a change event until the user tabs out of the field, whereas a click event will be triggered by mouse- or keyboard-based changes to the checkbox. Also, given that within the event handler this refers to the checkbox, you can use this.checked directly, no need for $(this).prop("checked") or $(this).is(":checked").

Also, given you'll have list items added dynamically, you will want to handle checkbox events with a delegated event handler bound to a parent element that does exist when the page loads (the document, in your case, since you have no container divs or anything). That is:

// instead of:
$("input[type=checkbox]").on("click", function() { ... })
// use delegated version:
$(document).on("click", "input[type=checkbox]", function() { ... })

Putting that together with your other code (and reducing the delay to three seconds instead of five, for ease of testing):

$(document).ready(function() {
    $("#input").on("input", function isEmpty() {
        if ($.trim(this.value) === "") {
            $("#addButton").fadeOut(250);
        } else {
            $("#addButton").fadeIn(250);
        }
    });

    $("#addButton").click(function() {
        $("#addButton").after($("<p></p>").text($("#input").val()));
        $("p:first").prepend('<input type="checkbox" />');
        $("#input").val("");
        $("#addButton").hide();
    });

    $(document).on('click', 'input[type=checkbox]', function() {
        if (this.checked) {
            // use an arrow function to solve the "this" problem
            var timeoutId = setTimeout(() => {
                $(this).parent().remove();
            }, 3000); // delay in milliseconds
            
            // store the timeout id against the element itself, because
            // the user could click multiple checkboxes in the list
            $(this).data("timeoutId", timeoutId);
        } else {
            clearTimeout($(this).data("timeoutId"));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>ToDo</h1>
<input type="text" placeholder="Please Enter a Task" id="input">
<input type="submit" value="Add" id="addButton" hidden="hidden">

Collectives™ on Stack Overflow

detecting if checkbox was checked

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related