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, был ли установлен флажок «вернуться» или нет, я не хочу видеть, это проверено, мне нужно знать, было ли оно когда-либо изменено. Так что, если пользователь проверяет это, а затем снимает флажок, то условие = true

Может быть, с некоторыми javascript? Я не знаю, js, но я могу попытаться использовать это, если это не супер трудно

Answer 1

Это намного проще:

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

Answer 2

это поможет:

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

Вы можете использовать переключатель для установки экземпляра, когда пользователь впервые щелкает по флажку, затем устанавливает это значение в переменной и проверяет, не превышает ли это значение значение 0, а ваш флажок равен ложному ... Это означает, что пользователь нажал установите этот флажок один раз, а затем снимите его.

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

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);
    }
});