使用 javascript 选择选择框

Question

我有一个关于使用 Javascript 选择选择框的问题。我已将文件上传到 http://www.mikevierwind.nl/javascript/risicoinventarisatie.htm 这里你会看到一个有很多问题和单选按钮的表格。每个问题都有 2 个单选按钮，是和否。

当你问第一个问题时。 “糖尿病”比您选择的单选按钮“ja”您看到现在将显示另一个问题。但当我选择“nee”时，这个问题就消失了。我怎样才能用Javascript创建它？我的 JavaScript 代码是：

 var diabetes = false;
 var diabetesvraag = $("#blokken table.lichamelijkegezondheid .diabetesextra")
 var buttondiabetes = $("#blokken table.lichamelijkegezondheid .diabetesja")

 diabetesvraag.hide();
 buttondiabetes.click(function()
 {   
  if(diabetes == false)
  {
   diabetes = true;
   diabetesvraag.show();
  }

  else
  {
   diabetes = false;
   diabetesvraag.hide();
  }
  return false;
 }); 

Answer 1

好吧，首先您需要更正您的 HTML。每组“是”和“否”单选按钮都需要使用正确的 name 属性分组在一起。这将告诉浏览器每组“是”和“否”中只能选择一个。但是，每个条件的名称必须是唯一的。应该这样做：

<span class="radio">
    <input type="radio" name="condition_selection" value="yes" id="yes" />
    <label for="yes">Yes</label>
    <input type="radio" name="condition_selection" value="no" id="no" />
    <label for="no">No</label></span>

出于可访问性原因，您还应该使用 label 元素的 for 属性，并尝试使用除表格之外的其他内容来标记此表单，但是这与这里的问题无关。

---

接下来，您可以尝试使用 change 事件处理程序来检查这两种状态来简化 Javascript 代码，如下所示：

$('.add_qns').hide();

$('.radio :radio').change(function(){
    if(this.value === 'yes'){
        $(this).parent().next('.add_qns').show();
    } else {
        $(this).parent().next('.add_qns').hide();
    }
});

您可以更改选择器 $(this).parent()。 next('.add_qns') 以适合您的标记。请参阅：http://www.jsfiddle.net/yijian/BcAwH/ 进行现场演示。

Answer 2

将 class="diabetesja" 也添加到 nee 按钮，因为您的代码仅将点击事件分配给 .diabetesja 单选按钮。

或者，您可以添加一个类class="diabetesnee" 到您的 nee 单选按钮并将其更改

var buttondiabetes = $("#blokken table.lichamelijkegezondheid .diabetesja")

为

var buttondiabetes = $("#blokken table.lichamelijkegezondheid .diabetesja, #blokken table.lichamelijkegezondheid .diabetesnee")

要点是两个单选按钮（Ja 和 Nee）都需要有点击处理程序。