Question

我正在使用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。

现在为什么会这样？

Answer 1

您正在设置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;
    }
}

＆＃13;

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

＆＃13;

Answer 2

您的切换功能，您执行cb.style.checked = 1;。它假设是cb.dataset.checked = 1;。

Answer 3

我猜你的问题是你的if条款。

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

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

Javascript不是Checkbox的真正结果

3 个答案: