Question

我有以下HTML：

<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-2在检查input.pricing-single-level时显示，并在未选中时隐藏。

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

我做错了什么？

Answer 1

尝试

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

Answer 2

你拼错了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){

jQuery：没有（：选中）不工作？

2 个答案: