Home Javascript does not the true result of Checkbox
Reply: 3

Javascript does not the true result of Checkbox

chouueawaech
1#
chouueawaech Published in 2018-01-13 07:33:41Z

I'm working with Javascript to see if a checkbox is checked or not. So I coded this:

<html>
<head>
    <style type="text/css">
    .cb{
        display: inline-block;
        width: 12px;
        height:12px;
        background: #EEE;
        border: 1px solid #999;
        border-radius:1px;
        transition: background 0.2s linear;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <script type="text/javascript">
    function submitValues(){
        alert("cb1 = "+cb1.dataset.checked+"    cb2 = "+cb2.dataset.checked);
    }
    function toggleCB(cb){
        if(cb.dataset.checked == 0){
            cb.style.background = "#89D814";
            cb.style.checked = 1;
        }else{
            cb.style.background = "#EEE";
            cb.dataset.checked = 0;
        }
    }
    </script>
    <div class="cb" id="cb1" data-checked="0" onclick="toggleCB(this)"></div> cb1</br></br>
    <div class="cb" id="cb2" data-checked="0" onclick="toggleCB(this)"></div> cb2</br></br>
    <button onclick="submitValues()">Submit</button>
</body>

So if you check the checkbox within this example, after submitting the form, the true value of checkbox must be shown in the popup alert.

But the problem with it is that whenever I try to Submit the form while both checkboxes are checked, I still see the message cb1 = 0 cb2 = 0 on screen.

Now why is that?

Nisarg
2#
Nisarg Reply to 2018-01-13 07:40:27Z

You are setting cb.style.checked instead of cb.dataset.checked. Updating that would fix the issue.

function toggleCB(cb){
    if(cb.dataset.checked == 0){
        cb.style.background = "#89D814";
        cb.dataset.checked = 1;             // << --- This
    }else{
        cb.style.background = "#EEE";
        cb.dataset.checked = 0;
    }
}

<html>
<head>
    <style type="text/css">
    .cb{
        display: inline-block;
        width: 12px;
        height:12px;
        background: #EEE;
        border: 1px solid #999;
        border-radius:1px;
        transition: background 0.2s linear;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <script type="text/javascript">
    function submitValues(){
        alert("cb1 = "+cb1.dataset.checked+"    cb2 = "+cb2.dataset.checked);
    }
    function toggleCB(cb){
        if(cb.dataset.checked == 0){
            cb.style.background = "#89D814";
            cb.dataset.checked = 1; 
        }else{
            cb.style.background = "#EEE";
            cb.dataset.checked = 0;
        }
    }
    </script>
    <div class="cb" id="cb1" data-checked="0" onclick="toggleCB(this)"></div> cb1</br></br>
    <div class="cb" id="cb2" data-checked="0" onclick="toggleCB(this)"></div> cb2</br></br>
    <button onclick="submitValues()">Submit</button>
</body>

Viki Theolorado
3#
Viki Theolorado Reply to 2018-01-13 07:40:36Z

Your toggle function, you do cb.style.checked = 1;. It suppose to be cb.dataset.checked = 1;.

Hoargarth
4#
Hoargarth Reply to 2018-01-13 07:42:51Z

I guess your problem is your if clause.

if(cb.dataset.checked == 0)
{
  cb.style.background = "#89D814";
  cb.style.checked = 1;
}

You wrote cb.style.checked but I guess what you wanted to write was cb.dataset.checked

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.331424 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO