Question

我希望能够选择一个单选按钮并弹出一个确认框。如果我按否，我希望单选按钮返回选定的另一个单选按钮的值。所以假设我有三个按钮，一个名为1 2或3.如果我选择1，然后出现一个框，说你确定吗？如果我按否，我希望它恢复到3单选按钮。

qq(<input type=radio name=Acceptance value='$rating->{rating}' $checked onclick=confirmation()> $rating->{wording}<br>\n);

    <script type="text/javascript">
function confirmation() {
var checked = null;
var inputs = document.getElementsByName('Acceptance');
var answer = confirm ("Are you sure?")
for (var i = 0; i < inputs.length; i++) {
          if (inputs[i].checked) {
           checked = inputs[i];
           break;
   }
}
   if(checked!=inputs[1]){
    confirm ("Are you sure?")
    if (console){
    console.log("test");
    }else{
    inputs[1].checked;
    }
}}

Answer 1

要清除它，请使用元素的checked属性并将其设置为空字符串，以取消选中单选按钮。您还需要从confirm()函数读回值，如果它是假的，则清除它。

我稍微修改了你的脚本以使它工作：

function alertUser() {
    var checked = false;
    var element = "";
    var inputs = document.getElementsByName('Acceptance');
    
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            checked = true;
            element = inputs[i];
            break;
        }
    }
  
    if (checked == true) {
        if (!confirm('You have chosen ' + element.value + ' is this correct?')) {
            element.checked = "";
        }
    }
}

<input type='radio' name='Acceptance' value='option1' checked='checked' onclick='alertUser()'>option 1
<br/>
<input type='radio' name='Acceptance' value='option2' onclick='alertUser()'>option 2
<br/>
<input type='radio' name='Acceptance' value='option3' onclick='alertUser()'>option 3
<br/>

Answer 2

我自己使用原生confirm()的方法是：

function checkConfirm() {
    // get the user's response ('ok' is true, 'cancel' is false):
    var choice = confirm ('Are you sure?'),
    // find the previously-checked element from the same radio group (if any):
        previousChoice = document.querySelector('input[type="radio"][name="' + this.name + '"].userChecked');

    // if the user clicked 'ok' (true):
    if (choice) {
        // we remove the 'userChecked' class from the previously-checked radio:
        previousChoice.classList.remove('userChecked');
        // and add that class to the current element:
        this.classList.add('userChecked');
        // because the 'change' event fires *after* the radio is checked,
        // we can let the browser deal with that
    }
    // the user clicked 'cancel' (false):
    else {
        // uncheck the radio:
        this.checked = false;
        // if there was a previously-checked element:
        if (previousChoice) {
            // we re-check it:
            previousChoice.checked = true;
        }
    }
}

// iterate over the elements in the collection returned by document.querySelectorAll():
[].forEach.call(document.querySelectorAll('input[type="radio"]'), function(radio){
    // the 'radio' variable is the radio element, and we add a change-event
    // handler (defined above):
    radio.addEventListener('change', checkConfirm);
});

function checkConfirm() {
  var choice = confirm('Are you sure?'),
    previousChoice = document.querySelector('input[type="radio"][name="' + this.name + '"].userChecked');
  if (choice) {
    previousChoice.classList.remove('userChecked');
    this.classList.add('userChecked');
  } else {
    this.checked = false;
    if (previousChoice) {
      previousChoice.checked = true;
    }
  }
}

[].forEach.call(document.querySelectorAll('input[type="radio"]'), function(radio) {
  radio.addEventListener('change', checkConfirm);
});

<form action="">
  <fieldset>
    <label>
      <input type="radio" name="demo" />Input 1</label>
    <label>
      <input type="radio" name="demo" />Input 2</label>
    <label>
      <input type="radio" name="demo" />Input 3</label>
  </fieldset>
</form>

参考文献：

Answer 3

如果要还原为特定元素。而不是清算。

<script type="text/javascript">
function alertUser() {
    var checked = false;
    var element = "";
    var inputs = document.getElementsByName('Acceptance');
        for (var i = 0; i < inputs.length; i++) {
          if (inputs[i].checked) {
           checked = true;
           element = inputs[i];
           break;
          }
        }   
    if(checked==true){
        if (!confirm('You have chosen '+ element.value + ' is this correct?')){
           inputs[1].checked=true;
        };
    };
   }
</script>

如果确认=取消，Javascript将返回不同的选定无线电

3 个答案: