Javascript 不是 Checkbox 的真实结果

我正在使用Javascript来查看是否选中了复选框。所以我编码了这个：

<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>

因此，如果您选中此示例中的复选框，则在提交表单后，复选框的真实值必须显示在弹出警报中。

但问题是，每当我在选中两个复选框时尝试提交表单时，我仍然会在屏幕上看到cb1 = 0 cb2 = 0消息。

这是为什么呢？

您正在设置cb.style.checked而不是cb.dataset.checked。更新它将解决问题。

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>

你的切换功能，你做cb.style.checked = 1;.它应该是cb.dataset.checked = 1;.

我想你的问题是你的if子句。

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

你写cb.style.checked但我想你想写的是cb.dataset.checked

相关内容

最新更新

热门标签：