Question

我尝试使用一些复选框创建网站设置页面。如果复选框是“开启”。 HTML元素具有特定值，否则它将是其他值。但由于某些原因，每个复选框都会继续返回值＆＃34; on＆＃34;在JavaScript中。请帮忙。我的HTML：

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

我的JavaScript：

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').value;

  if (valueOfCheckBox == 'on') {
  document.getElementById('TXT').innerHTML = 'ON';
  } else { 
  document.getElementById('TXT').innerHTML += 'OFF';
  }
}

Answer 1

默认情况下会选中您的复选框。从复选框输入中删除checked=checked

<input type='checkbox' id='theBOX'>

是的，您必须更改Javascript函数以检查是否已选中复选框

如果选中复选框，则可以将valueOfCheckBox设为true，否则将为false

  var valueOfCheckBox = document.getElementById('theBOX').checked;

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').checked;

  if (valueOfCheckBox) {
    document.getElementById('TXT').innerHTML = 'ON';
  } else { 
    document.getElementById('TXT').innerHTML += 'OFF';
  }
}

Answer 2

您应该删除已选中的＆＃39;来自输入标记的属性

<input type='checkbox' id='theBOX' >

＆＃13;

function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX').value;

  if (valueOfCheckBox == 'on') {
  document.getElementById('TXT').innerHTML = 'ON';
  } else { 
  document.getElementById('TXT').innerHTML += 'OFF';
  }
}

＆＃13;

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

＆＃13;

Answer 3

您有多个问题：

1 - 您忘记了js函数调用中的括号：

<button onclick='theFunction()'>Apply Changes</button>

2 - 当您使用值设置js var时，或者我们不需要它。就这样说：

var valueOfCheckBox = document.getElementById('theBOX');

3 - 然后要知道是否检查，请使用js .checked属性如下：

if (valueOfCheckBox.checked == true) {
    document.getElementById('TXT').innerHTML = 'ON';
  } else { 
    document.getElementById('TXT').innerHTML += 'OFF';
  }

最后，您的代码应如下所示：

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
<script type="text/javascript">
function theFunction() {
  var valueOfCheckBox = document.getElementById('theBOX');
  if (valueOfCheckBox.checked == true) {
    document.getElementById('TXT').innerHTML = 'ON';
  } else { 
    document.getElementById('TXT').innerHTML += 'OFF';
  }
}
</script>

Answer 4

您可以使用.checked属性。如果默认选中该复选框，则此属性返回true，否则返回false。如果您希望默认选中输入框，只需在输入标记中添加checked属性。

<input type="checkbox" id="theBOX" checked>

希望这可以帮到你。

<head>
<script>
    function theFunction() {
        var valueOfCheckBox = document.getElementById('theBOX').checked;

        if (valueOfCheckBox) {
            document.getElementById('TXT').innerHTML = 'ON';
        } else {
            document.getElementById('TXT').innerHTML = 'OFF';
        }
    }

</script>
</head>

<body>

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

</body>

</html>

Answer 5

这样可行。

function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');

if (valueOfCheckBox.checked) {
document.getElementById('TXT').innerHTML = 'ON';
 } else { 
document.getElementById('TXT').innerHTML = 'OFF';
 }
 }

<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked />
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>

我建议您使用<label for="checkbox">Click this checkbox</label>代替<p>Click this checkbox</p>。

CheckBox值在HTML中

5 个答案: