Home / Questions / 334441
Accepted
Fernando Iam
Asked: 2020-03-05 09:09:14 +0800 CST 2020-03-05 09:09:14 +0800 CST

verify that the checkbox is checked with jquery

  • 772

I want to check that if the checkbox is checked, for example, paint a paragraph yellow, and if I disable it, I don't understand how to make it work, I have this code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="num1">
    <input type="text" id="num2">
    <input type="checkbox" id="checkbox">

    <p id="color">Test</p>
    <script>
        if ($('#checkbox').prop('checked')) {
            $('#color').css('background','yellow');
        }
    </script>
</body>

</html>

jquery

2 Answers

  1. Best Answer

    Friend, to detect changes in your checkbox use the property checkedand with that it asks checkbox if it is checked .

    $("#checkbox").change(function() {
if (this.checked) {
            $('#color').css('background','yellow');
        }else{
             $('#color').css('background','white');
        }


});
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="num1">
    <input type="text" id="num2">
    <input type="checkbox" id="checkbox">

    <p id="color">Test</p>
</body>

</html>

    • 1

  2. this should work

    <script>

        $('body').on('click','#checkbox',function() {
            if($("#checkbox").is(':checked')) { 
                $('#color').css('background','yellow');
            }else{
                $('#color').css('background','white');
            }
     })
    </script>

    You use the on click method to hear the change.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <input type="text" id="num1">
    <input type="text" id="num2">
    <input type="checkbox" id="checkbox">

    <p id="color">Test</p>
</body>

</html>
    • 0