Question

我正在尝试从无线电表单中获取用户选择的数据。这是我尝试过的。

<form id="office">
    <label id="ques1"> question 1</label>
        <div class="q1 wrong q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
        <div class="q1 wrong q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
        <div class="q1 wrong q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
        <div class="q1 right q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>

            <br/>
<input type="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script>
var answersQ01 = document.getElementsById(q1a1).value;

function checkFunction()
{
if (answersQ01.checked) {/*here i would like to know if it's checked or not*/}

};

这似乎不起作用。关于如何处理这个的任何想法？如果可能的话，我宁愿在HTML和JavaScript中得到答案，因为我不懂PHP或jQuery。

非常感谢！

P.S 我把每个输入放在一个div中，这样我就可以在CSS中为它们提供单独的设计。

Answer 1

尝试此代码，如果它不适合您，我会改进它。（代码段不允许您使用form标记）。

＆＃13;

window.onload = function() {

  document.getElementById('submit').onclick = function() {
    if (document.getElementById('q1a1').checked == true) {
      console.log('checked');
    } else {
      console.log('not checked');
    }
  };
};

＆＃13;

<!--<form id="office">-->
<label id="ques1">question 1</label>
<div class="q1 wrong q1a1">
  <input type="radio" name="question1" id="q1a1" value="q1a1" />Answer1
  <br/>
</div>
<div class="q1 wrong q1a2">
  <input type="radio" name="question1" value="q1a2" />Answer2
  <br/>
</div>
<div class="q1 wrong q1a3">
  <input type="radio" name="question1" value="q1a3" />Answer3
  <br/>
</div>
<div class="q1 right q1a4">
  <input type="radio" name="question1" value="q1a4" />Answer4
  <br/>
</div>

<br/>
<input type="submit" id="submit" name="submitAnswers" value="Submit Your Answers" />
<!--</form>-->

＆＃13;

Answer 2

您可以使用document.querySelector来获取已选中的单选按钮。这是您的代码段

    function checkFunction(){
    var checkedValue='';
    var getCheckedButton= document.querySelector('input[name="question1"]:checked');
    if(getCheckedButton !==null){
    checkedValue = getCheckedButton.value;
    }
    console.log(checkedValue);
   }

这是DEMO

JavaScript - 检查此单选按钮？

2 个答案: