Question

Ruby on Rails 3。我有一个有两个问题的表格。我想根据用户做出的第一个问题选择显示或隐藏第二个问题。当前该元素应返回长度或值时返回0。所以在JS中我输入：

$("survey_hardware_").find("input[value='IP Phones']:checked").length

然后返回0.

这是脚本：

$(document).ready(function() {
$('#device').change(function(event){
if ($("survey_hardware_").find("input[value='IP Phones']:checked").length ||
  $("survey_hardware_").find("input[value='IP PBX Systems']:checked").length)
{
    $('#phonepbx').css('display', 'inline');
}
else
{
    $('#phonepbx').css('display', 'none');
}
});
});

这就是问题：

<div class="row" id="device">
<ul>1.  What IP hardware does your company frequently sell and/or install?  (select all that apply)<br/>
<li style="display:block;"><%= check_box_tag 'survey[hardware][#{test}]', "IP Phones" %> IP Phones</li>
<li style="display:block;"><%= check_box_tag 'survey[hardware][]', "IP PBX Systems" %> IP PBX Systems </li>
<li style="display:block;"><%= check_box_tag 'survey[hardware][]', "IP Security/Surveillance Systems" %> IP Security/Surveillance Systems</li>
<li style="display:block;"><%= check_box_tag 'survey[hardware][]', "IP infrastructure (cabling, switches...etc.)" %> IP infrastructure (cabling, switches...etc.)</li>
</ul>
</div>

这是我想要显示的第二个问题，只有当问题1选择了1或2时。

<div class="row" id="phonepbx" style="display:none"> 
<ul>4a.  My customers have their own brand preferences regarding VoIP manufacturers.<br/>
<li><%= f.radio_button(:voip, "1") %>Strongly Agree</li>
<li><%= f.radio_button(:voip, "2") %>Somewhat Agree</li>
<li><%= f.radio_button(:voip, "3") %>Neutral</li>
<li><%= f.radio_button(:voip, "4") %>Somewhat Disagree</li>
<li><%= f.radio_button(:voip, "5") %>Strongly Disagree</li>
</ul>
</div>

我尝试为每个选项添加唯一ID。元素也返回0。如何获取选择的长度或值以隐藏或显示div？谢谢

修改

我将脚本更改为此。

$(document).ready(function() {
$("#survey_hardware_").on('click', function(){
if (($("#survey_hardware_")[0].value == 'IP Phones') || ($("#survey_hardware_")[1].value == 'IP PBX Systems'))
{
    $('#phonepbx').css('display', 'inline');
}
else
{
    $('#phonepbx').css('display', 'none');
}
});
});

这将显示div。但不要切换显示和隐藏。感谢您提供的信息。

我的解决方案

function checkHardware() {
    if ($('#device input:checkbox:eq(0)').is(':checked') || $('#device input:checkbox:eq(1)').is(':checked'))
    {
        $('#phonepbx').css('display', 'block');
    }

    if ($('#device input:checkbox:eq(2)').is(':checked') || $('#device input:checkbox:eq(3)').is(':checked'))
    {
        $('#ipsec').css('display', 'block');
    }

    if ($('#device input:checkbox:eq(0)').is(':checked') == false && $('#device input:checkbox:eq(1)').is(':checked') == false)
    {
        $('#phonepbx').css('display', 'none');
    }

    if ($('#device input:checkbox:eq(2)').is(':checked') == false && $('#device input:checkbox:eq(3)').is(':checked') == false)
    {
        $('#ipsec').css('display', 'none');
    }

}

感谢您的帮助。

Answer 1

在以下行中：

$("survey_hardware_").find("input[value='IP Phones']:checked").length

您正在选择一个DOM元素survey_hardware_。选择器有效但我不相信你有survey_hardware_元素。您可能有一个名称为id或class的元素。

因此，如果您选择的内容为survey_hardware_的元素，请按以下方式使用#选择器：

$("#survey_hardware_").find("input[value='IP Phones']:checked").length

有关其他可能的选择器及其用法，请参阅jQuery selectors。

Answer 2

有几个问题。

div本身不会改变。因此，您永远不会触发简单的div #device更改。以下是来自jQuery doc，告诉我们将发送什么change事件：

更改事件在其值更改时发送到元素。此活动仅限于input元素，textarea框和select元素。对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发事件，但对于其他元素类型，事件将延迟，直到元素失去焦点。 http://api.jquery.com/change/
使用change并不好。它只能被消耗一次，对动态的东西不利。最好使用on
```
$('.some_input').on('change', function(){
  // Do something here
});
```
length等于0对空白数组有效。所以你的情况总是会恢复正常。

鉴于上述问题，很难提供精确的解决方案。请重构并检查会留下什么问题。

<强>更新

要弄清楚布局有点困难。但我自己的建议是在复选框上添加data-target属性并听取他们自己的更改。

给出这样的复选框

check_box_tag 'survey[hardware][]', "IP PBX Systems", 
  data: {target: "#question2"}, class: 'question_1_check_box"

这样的问题2 div

<div id="question2">question 2 content</div>

然后

$('.question_1_checkbox').on('change', function(){
  $(this.data('target')).toggle();
});

JQuery获取check_box_tag的值或长度

2 个答案: