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有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事件：

   更改事件發送到一個元素，當它的值更改。此事件限於input個元素，textarea個元素和select個元素。對於選擇框，複選框和單選按鈕，當用戶使用鼠標進行選擇時，會立即觸發事件，但對於其他元素類型，事件將被推遲直到元素失去焦點。 http://api.jquery.com/change/

2. 使用change並不好。它只能被消費一次，對於動態的東西不好。這是更好地使用on

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

3. length等於0有效期爲空白陣列。所以你的條件將永遠返回真實。

鑑於上述問題，很難提供精確的解決方案。請重構並檢查會留下什麼問題。

更新

這是一個有點很難搞清楚佈局。但我自己的建議是在複選框上添加一個data-target屬性並聽取他們自己的更改。

鑑於這些複選框

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

而這樣的問題2格

<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其他其他可能的選擇和它們的用法。