Question

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

当你转到第一个问题时。 “糖尿病”比你选择的放射性按钮“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属性组合在一起。这将告诉浏览器，每组“是”和“否”中只有一个是可选的。但是，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>

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

接下来，您可以尝试使用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/yijiang/BcAwH/。

Answer 2

同时将class="diabetesja"放到nee按钮，因为您的代码只会将click事件分配给.diabetesja单选按钮..

或者，您可以在 nee 单选按钮中添加课程class="diabetesnee"并更改

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

到

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

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

使用javascript选择选择框

2 个答案: