jquery - 根据值同步复选框可见性

Question

我有两个复选框组，我最终需要让其中一个影响另一个的输出（可见性）。这是我的小提琴。

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

因此，第一个输入的值（int 值）应该与第二个复选框组（当前隐藏）的输入值匹配，然后根据该选择显示它们。我觉得我非常接近，但任何朝着正确方向的轻推都会有很大的帮助。谢谢！

Answer 1

稍微修改了您的代码。请参阅代码注释。

演示：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

我相信这个小提琴就是你要找的

// 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);
});