javascript - 单击整个元素以注册单选按钮值

Question

我希望能够单击整个元素，而不仅仅是单选按钮和文本，以便注册与单选按钮关联的值。

<div class='btn'>
<input id = '4' class='btn4' type="radio" name='1' value='' >    
<label for = '4' class="label4">Question populated from jQuery goes here
</label></div>

当我用标签包装输入时，我丢失了 jQuery 放入元素内的文本。

我必须填充文本的函数是...

function populateQuestion(index) {
if (currentQuestion <=9){
$('.q_question').html(questionsArray[index]['question']);
for (var i = 0; i < 8; i++) {
    $('.jumbotron').html('');
    $('.btn' + (i + 1)).val(questionsArray[index]['choices'][i]).prop('checked', false);
  $('.label' + (i + 1)).html(questionsArray[index]['choices'][i]);
}
} else{ quizComplete(correctAnswers)}
}
populateQuestion(currentQuestion);

Answer 1

有趣的小问题。我尝试用一​​行 jQuery 来完成此操作，但很快意识到，由于正在更改的元素位于容器内部，因此尝试单击它们会重置它们(实际上使它们变得不可单击)。解决方案是在 CSS 中的容器顶部添加一个不可见的伪元素，这样您就无法实际单击单选按钮(或标签)。

$('div.btn').on('click', function() {
  $(this).children('input').prop('checked', !$(this).children('input').prop('checked'));
})

.btn {
  border: 1px solid red;
  padding: 12px;
  position: relative;
}
.btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='btn'>
  <input id='4' class='btn4' type="radio" name='1' value=''>
  <label for='4' class="label4">Question populated from jQuery goes here
  </label>
</div>