Jquery 基于值同步复选框可见性

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

---

因此，来自第一个输入的值（int值）应该与来自第二个复选框组（当前隐藏）的输入值匹配，然后基于该选择显示它们。我觉得我已经非常接近了，但任何朝着正确方向的推动都将是巨大的帮助。谢谢

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

演示：

$（“#wood#u typeschecklist输入”）.change（函数（）{
var destEl=this.id.split（“-”）；
//a、 更改了选择器以查找以选择器作为起始的
//返回的复选框值为wood_类型-
//与任何现有id都不匹配
//b、 `.split`当字符串与它的
//所以它返回了3个标记，而不是2个（in，wood_类型，126）
变量$matchingElem=$（“li[id^=“+destEl[1]+'-'+destEl[2]+”），$（“acf-wood物种可用性”）；
（$（this.attr（“checked”）！==未定义）？$matchingElem.show（）：$matchingElem.hide（）；
});

我相信这就是你要找的

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

---

我不清楚您的示例，因为两个复选框组包含完全相同的值。无论如何，jQuery选择器都找不到元素，因为没有id为

wood\u types

的元素。您可能希望使用“以开头”或“包含”选择器：。这正是我想要的。除了检查它们是否已经在pageload上“选中”之外，我还利用了您提供的内容，这也非常有效。再次感谢！！感谢你的回答，@Vega刚刚第一个到达这里。再次感谢！是的，但我认为您希望允许用户双向使用。这就是为什么我的代码要复杂一点！干杯

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