基於值的同步複選框可見性

Question

我有兩個複選框組，我最終需要其中一個影響另一個的輸出（可見性）。這是我的小提琴。

http://jsfiddle.net/kEKYw/1/

所以，從第一輸入（int值）的值應與來自第二複選框組（當前隱藏）的輸入值，然後顯示這些基於該選擇。我覺得我相當接近，但任何向正確的方向推動都會有很大的幫助。謝謝！

Answer 1

修改了你的代碼。查看關於代碼的評論。

DEMO：http://jsfiddle.net/kEKYw/3/

$("#wood_typeschecklist input").change(function() { 
    var destEl = this.id.split("-"); 
    //a. Changed selector to look for starts with selector as the 
    //checkbox value returned is wood_type-<number> 
    //which doesn't match any existing id 

    //b. `.split` splits the string when it matches its 
    //separator and so it was returning 3 tokens not 2 (in,wood_types,126) 
    var $matchingElem = $("li[id^=" + destEl[1] + '-' + destEl[2] + "]", $("#acf-wood_species_availability")); 
    ($(this).attr("checked") !== undefined) ? $matchingElem.show() : $matchingElem.hide(); 
}); 

Answer 2

我相信this fiddle是你在找什麼

// start off by hiding the second options 
$("#acf-wood_species_availability li").hide(); 

//add a click method to the inputs 
$("#wood_typeschecklist input").click(function() { 
    //verify that it's checked, if so, show the other input of the same value (and check it also) 
    if ($(this).is(':checked')) { 
     $('#acf-wood_species_availability input[value="' + $(this).val() + '"]').attr('checked', true).parents('.popular-category').show(); 
    } 
    //if it's unchecked, hide the other input and uncheck this one 
    else { 
     $('#acf-wood_species_availability input[value="' + $(this).val() + '"]').attr('checked', false).parents('.popular-category').hide();        
    } 
}); 

//now let's add click methods to the other checkboxes in case user clicks on them, if so, we hie this checkbox and uncheck the other one. 
$("#acf-wood_species_availability input").click(function() { 
    $(this).attr('checked', '').parents('.popular-category').hide(); 
    $('#wood_typeschecklist input[value="' + $(this).val() + '"]').attr('checked', false); 
});