JQuery获取check_box_tag的值或长度

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 或 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

有几个问题。

1. div 本身不会改变。因此，您对普通 div #device 的更改将永远不会被触发。以下是来自 jQuery doc 的内容，用于说明将发送 change 事件的内容：

   change 事件在元素值改变时发送到元素。此事件仅限于input 元素、textarea 框和select 元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会延迟到元素失去焦点为止。 http://api.jquery.com/change/

2. 使用change 不好。它只能使用一次，对动态事物不利。最好使用on

   $('.some_input').on('change', function(){
     // Do something here
   });
   

3. length 等于 0 对空白数组有效。因此，您的条件将始终返回 true。

看到以上问题很难提供精确的解决方案。请重构并检查会留下什么问题。

更新

要弄清楚布局有点困难。但我自己的建议是在复选框上添加一个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();
});

Answer 2

在下面一行：

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

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

因此，如果您要选择具有survey_hardware_ id 的元素，请使用# 选择器，如下所示：

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

请参阅jQuery selectors 了解其他可能的选择器及其用法。