如何实现复选框未选中时隐藏对应.txtCal类文本输入框，选中时显示？

Got it, let's get this working exactly how you want it! The core task is linking each checkbox to its corresponding text input, so we can show/hide the input based on the checkbox's state. We'll also tweak the total sum logic to only count values from visible inputs, which makes more sense for your use case.

Modified jQuery Code #

jQuery(function($) {
    // 过敏原配料
    $('div.tags').delegate('input:checkbox', 'change', function() {
        // Toggle the corresponding .txtCal input based on checkbox state
        const $relatedInput = $(this).closest('label').nextAll('.txtCal').first();
        $relatedInput.toggle(this.checked);

        // Existing logic to show/hide results list items
        var list = $('.results > li').hide();
        $('input:checked').each(function() {
            list.filter('.' + $(this).attr('rel')).show();
        });

        // Recalculate total sum after toggling input visibility
        calculateTotalSum();
    }).find('input:checkbox').change(); // Initialize state on page load

    // Reusable function to calculate total sum from visible inputs
    function calculateTotalSum() {
        var calculated_total_sum = 0;
        $(".tags .txtCal:visible").each(function () {
            var get_textbox_value = $(this).val();
            if ($.isNumeric(get_textbox_value)) {
                calculated_total_sum += parseFloat(get_textbox_value);
            }
        });
        $("#total_sum_value").html(calculated_total_sum);
    }

    // Update total sum when input values change
    $(".tags").on('input', '.txtCal', calculateTotalSum);
});

Key Changes Explained #

• Checkbox-to-Input Linking: We use $(this).closest('label').nextAll('.txtCal').first() to reliably find the exact .txtCal input tied to the clicked checkbox. This works even if you adjust the HTML structure later (like adding extra elements between the label and input).
• Visibility Toggle: The toggle(this.checked) method simplifies showing/hiding the input—no need for separate show()/hide() calls. It shows the input when the checkbox is checked, hides it when not.
• Visible-Only Sum Calculation: We added the :visible selector to the sum logic so only active, visible inputs contribute to the total. We also moved the sum calculation into a reusable function so we can trigger it both when inputs change and when checkboxes are toggled.
• Initialization: The existing .change() call ensures that on page load, all inputs are shown/hidden correctly based on their checkbox's initial state, and the total sum is calculated right away.

Optional Cleaner HTML (Improves Maintainability) #

Your existing HTML works perfectly, but wrapping each checkbox-input pair in a container makes the relationship even clearer and simplifies DOM traversal:

<div class="tags">
    <div class="ingredient-row">
        <label><input type="checkbox" checked rel="ingredient-1"> ingredient 1 </label>
        <input type="text" class='txtCal' />
    </div>
    <div class="ingredient-row">
        <label><input type="checkbox" checked rel="ingredient-2"> ingredient 2 </label>
        <input type="text" class='txtCal' />
    </div>
    <div class="ingredient-row">
        <label><input type="checkbox" checked rel="ingredient-3"> ingredient 3 </label>
        <input type="text" class='txtCal' />
    </div>
    <span><b>TOTAL :</b></span><b><span id="total_sum_value"></span></b>
</div>

If you use this structure, you can simplify the input selection line to $(this).closest('.ingredient-row').find('.txtCal')—it's more intuitive and less fragile.

内容的提问来源于stack exchange，提问作者staflow