最終的には、そのうちの 1 つをもう 1 つの出力 (可視性) に影響させる必要がある 2 つのチェックボックス グループがあります。これが私のフィドルです。
したがって、最初の入力 (int 値) の値は、2 番目のチェックボックス グループ (現在は非表示) の入力の値と一致し、その選択に基づいて表示されます。私はかなり近づいていると感じていますが、正しい方向への微調整は大きな助けになるでしょう. ありがとう!
最終的には、そのうちの 1 つをもう 1 つの出力 (可視性) に影響させる必要がある 2 つのチェックボックス グループがあります。これが私のフィドルです。
したがって、最初の入力 (int 値) の値は、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);
});
コードを少し変更しました。コードのコメントを参照してください。
デモ: 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();
});