2013-09-25 88 views
0

我有以下HTML:jQuery:not(:checked)not working?

<form class="pricing-downloads-right pricing-last-form" action=""> 
    <div class="pricing-levels-top-2"> 
     <input class="pricing-single-level" type="radio" name="sex" value="male"><strong>Single Level Download $49.95:</strong> Choose a single level (1 to 7) and receive access to all lessons, PDFs and review audio for that level, plus 30 days of online access ($80 value). Email us your level choice after purchase.<br> 
     <input class="pricing-3-level-download" type="radio" name="sex" value="male"><strong>3 Level Download $99.95:</strong> Choose any 3 levels (1 to 7) and receive access to all lessons, PDFs and review audio for those levels, plus 60 days of online access ($190 value). Email us your level choices after purchase.<br> 
     <input class="pricing-all-access-package" type="radio" name="sex" value="male"><strong>All Access Package $199.9:</strong> Receive access to all lessons, PDFs and review audio for all 7 levels, plus 90 days of online access ($300 value).<br> 
    </div> 
    <div class="pricing-levels-2"> 
     <p>Which level would you like? (Click all that apply)</p> 
     <input type="checkbox" name="vehicle" value="Bike">Level 1<br> 
     <input type="checkbox" name="vehicle" value="Bike">Level 2<br> 
     <input type="checkbox" name="vehicle" value="Bike">Level 3<br> 
     <input type="checkbox" name="vehicle" value="Bike">Level 4<br> 
     <input type="checkbox" name="vehicle" value="Bike">Level 5<br> 
     <input type="checkbox" name="vehicle" value="Bike">Level 6<br> 
     <input type="checkbox" name="vehicle" value="Bike">Level 7<br> 
    </div> 
</form> 

和jQuery:

jQuery('.pricing-downloads-right input[type=radio]').on('change', function(){ 
    if(jQuery('.pricing-levels-top-2 input.pricing-single-level:checked').length > 0){     
      //since you don't want to target by name 
      jQuery('.pricing-levels-2').show(); 
    } 
}); 

jQuery('.pricing-downloads-right input[type=radio]').on('change', function(){ 
    if(jQuery('.pricing-levels-top-2 input.pricing-single-level:not(:checked)').lenght > 0){ 
      //since you don't want to target by name 
      jQuery('.pricing-levels-2').hide(); 
    } 
}); 

所以我想.pricing-levels-2input.pricing-single-level进行检查,以显示和隐藏,当它处于未选中状态。

现在.pricing-levels-2显示input.pricing-single-level被选中但未选中时不隐藏。

我做错了吗?

+1

你怎么知道哪个值是从1级选择第7级时复选框所有值都具有相同的价值,“自行车” –

+0

更改复选框的值..提到的复选框只会产生“自行车” –

回答

4

你拼错length

if(jQuery('.pricing-levels-top-2 input.pricing-single-level:not(:checked)') 
    .lenght > 0){ 

应该

if(jQuery('.pricing-levels-top-2 input.pricing-single-level:not(:checked)') 
    .length > 0){ 
+1

哦,这是一个语法问题,而不是编程问题。 – alexchenco

4

尝试

jQuery('.pricing-downloads-right input[type=radio]').on('change', function() { 
    jQuery('.pricing-levels-2').toggle(jQuery('.pricing-levels-top-2 input.pricing-single-level:checked').length > 0); 
}).change(); 

演示:Fiddle

一个可能更好的办法

jQuery(function ($) { 
    var $pl2 = $('.pricing-levels-2'); 
    var $psl = $('.pricing-levels-top-2 input.pricing-single-level'); 

    $('.pricing-downloads-right input[type=radio]').on('change', function() { 
     $pl2.toggle($psl.is(':checked')); // $ps1[0].checked 
    }).change(); 

}) 

演示:Fiddle