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>

Answer 2

您可以为外部div注册一个click事件，并执行您想要执行的任何代码。

$(function(){

  $("div.btn").click(function(e){
     e.preventDefault();
     alert("clicked");
     var _this=$(this);
     var radio = _this.find("input[type='radio']");
     //Do something now
     alert('id:'+radio.attr("id"));  //Id of radio button
     alert('value:'+radio.val());    //value of radio button
  });

});

Here是一个工作样本。

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

2 个答案: