HTML如何做一个条件:如果复选框曾经被更改

Question

我有一个html文件，如下所示：

<article class="question">
<input id="revert" name ="revert" type="checkbox">
<label for="revert">
<section  class="front">
<?php echo $question ?>
</section>
<section class="back">
<?php echo $answer ?>
</section>
</label>
</article>
<form method="post">
<input type=text name="reponse" placeholder="Ecrivez votre réponse ici"/>
<input type=submit name="envoi_reponse" id="envoi_reponse_1" value="Envoyer"/>
</form>

我想看看在PHP中，复选框"revert"是否被更改，我不想看它是否被检查过，我需要知道它是否被更改过。因此，如果用户选中它，然后取消选中，则条件=真

也许用一些javascript？我不知道js，但如果它不是超硬，我可以尝试使用它

Answer 1

这将有所帮助：

<script>
$('#input-to-watch').on('change', function() {
var checked = false;
if ($(this).is(':checked')) {
checked = true;
}
$.ajax({
url: 'handle_change_checkbox.php',
data: {checkboxState: checked},
type: 'post',
success: function(res) {
alert(res);
},
error: function (error) {
alert('error!!!');
}
})
})
</script>

这将是您的handle_change_checkbox.php

<?php
if (!empty($_POST)) {
if (!empty($_POST['checkboxState'])) {
if ($_POST['checkboxState'] == true) {
die ('checkbox is changed to checked');
}else {
die ('checkbox is changed to not checked');
}
}
die ('something went wrong, check your posted data');
}
?>

Answer 2

var isCheckboxChanged = false;
var checkboxInitialValue = $('#revert').is(":checked");
var checkboxValueAfterChange = null ;
$('#revert').on('change', function(){
isCheckboxChanged = true;
checkboxValueAfterChange = $('#revert').is(":checked");
$('#wasValueChanged').val(1);
if(checkboxValueAfterChange == null){
console.log("No Changes detected");
}
else{
console.log("Checkbox state is the same after change ?");
console.log(checkboxInitialValue == checkboxValueAfterChange);
}

$.ajax({
url: "do_action_on_checkbox_revert.php", 
success: function(result){
$('.input_to_be_rendered_on_condition').removeClass('hidden');
$('.more_you_want_to_add_dynamically').html(result.information);
}

});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="revert">
<form>
<input type="hidden" id="wasValueChanged" value="0">
<input type="submit" name="submit" value="Submit"/>
</form>
<div class="hidden input_to_be_rendered_on_condition">
<p>Some stuff that is here</p>
<div class="more_you_want_to_add_dynamically"></div>
</div>
<!-- Later in PHP File (do_action_on_checkbox_revert.php) --> 
<!--
$reverted = false;
if(isset($_POST['wasValueChanged']) && $_POST['wasValueChanged'] > 0){
$reverted=true;
}
$return_arr = array();
if($reverted){
$return_arr["information"] = "We like changing input boxes";
}
else{
$return_arr["information"] = "We hate changing input boxes";
}
echo json_encode($return_arr);
-->
<!-- You cannot use the PHP part if thee submit button is not clicked, when you submit the form this page should reload and the $reverted should be true

您可以使用javascript来实现这一点。如果你只对它是否被点击和更改感兴趣，但值是否在最后保持不变并不重要，你可以使用以下方法：

var isCheckboxChanged = false;
$('#revert').on('change', function(){
isCheckboxChanged = true;
});

如果重要的是值与您开始使用的值不同，您可以执行以下操作：

var checkboxInitialValue = $('#revert').is(":checked");
var checkboxValueAfterChange = null ;
$('#revert').on('change', function(){
checkboxValueAfterChange = $('#revert').is(":checked");
if(checkboxValueAfterChange == null){
console.log("No Changes detected");
}
else{
console.log("Checkbox state is the same after change ?");
console.log(checkboxInitialValue == checkboxValueAfterChange);
}
});

Answer 3

当用户第一次单击复选框时，您可以使用切换来设置实例，然后在变量中设置该值，看看该值是否大于0，并且您的复选框是否等于false。。。这意味着用户单击复选框一次，然后取消选中它。

function isChecked() {
var valueCheck = document.querySelector('#checkBox:checked') !== null;
var curValue = document.getElementById("checkBox").checked;
console.log('Is the box checked?: ' + curValue)
let i = 0;
if (valueCheck) {
i++;
$checkNum = i;
}
if ($checkNum > 0 && curValue === false) {
// do something when element was set but is now unset
console.log('The box was set and now it has changed to false.' + 'nCheck: ' + valueCheck + 'nChange: ' + curValue);
}
}

<input type="checkbox" onchange="isChecked()" name="checkBox" id="checkBox">

Answer 4

这要简单得多：

<article class="question">
<input onclick="changed()" id="revert" name="revert" type="checkbox">   <label>Changed: <b id="change">False</b></label>
<label for="revert">
<section  class="front">
<?php echo $question ?>
</section>
<section class="back">
<?php echo $answer ?>
</section>
</label>
</article>
<form method="post">
<input type=text name="reponse" placeholder="Ecrivez votre réponse ici"/>
<input type=submit name="envoi_reponse" id="envoi_reponse_1" value="Envoyer"/>
</form>
<script>
function changed()
{
document.getElementById('change').innerHTML = 'true';
}
</script>