我想在未选中输入时隐藏输入,并在选中时显示相同的输入。
当未选中输入type =“ checkbox”时,如何隐藏.txtCal类的输入type =“ text”复选框?并显示何时检查?
jQuery(function($) {
// ingrédients allergènes
$('div.tags').delegate('input:checkbox', 'change', function() {
var list = $('.results > li').hide();
// var inputxtCal = $('.txtCal').hide();
//For each one checked
$('input:checked').each(function() {
list.filter('.' + $(this).attr('rel')).show();
});
}).find('input:checkbox').change();
$(".tags").on('input', '.txtCal', function () {
var calculated_total_sum = 0;
$(".tags .txtCal").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);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags">
<label><input type="checkbox" checked rel="ingredient-1"> ingredient 1 </label><br><input type="text" class='txtCal' /><br>
<label><input type="checkbox" checked rel="ingredient-2"> ingredient 2 </label><br><input type="text" class='txtCal' /><br>
<label><input type="checkbox" checked rel="ingredient-3"> ingredient 3 </label><br><input type="text" class='txtCal' /><br>
<span><b>TOTAL :</b></span><b><span id="total_sum_value"></span></b>
</div>
<ul class="results">
<li class="ingredient-1 ingredient-3">Alpha isomethylionone</li>
<li class="ingredient-1">Amyl cinnamal (Jasmonal A)</li>
<li class="ingredient-1">Amylcinnamyl alcohol</li>
<li class="ingredient-1">Anisyl alcohol</li>
<li class="ingredient-1 ingredient-2">Benzyl alcohol</li>
<li class="ingredient-1 ingredient-2 ingredient-3">Benzyl benzoate</li>
<li class="ingredient-2">Benzyl cinnamate</li>
<li class="ingredient-2">Benzyl salicylate</li>
<li class="ingredient-2">Butylphenyl methylpropional (Lilial)</li>
<li class="ingredient-2 ingredient-3">Cinnamal</li>
<li class="ingredient-3">Cinnamyl alcohol</li>
<li class="ingredient-3">Citral</li>
<li class="ingredient-3">Citronellol</li>
<li class="ingredient-3">Coumarin</li>
</ul>
jQuery(function($) {
// ingrédients allergènes
$('div.tags').delegate('input:checkbox', 'change', function() {
$(this).parent().nextAll().slice(0, 2).hide();
var list = $('.results > li').hide();
// var inputxtCal = $('.txtCal').hide();
//For each one checked
$('input:checked').each(function() {
list.filter('.' + $(this).attr('rel')).show();
$(this).parent().nextAll().slice(0, 2).show();
});
}).find('input:checkbox').change();
$(".tags").on('input', '.txtCal', function () {
var calculated_total_sum = 0;
$(".tags .txtCal").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);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags">
<label><input type="checkbox" checked rel="ingredient-1"/> ingredient 1 </label><br><input type="text" class='txtCal' /><br>
<label><input type="checkbox" checked rel="ingredient-2"/> ingredient 2 </label><br><input type="text" class='txtCal' /><br>
<label><input type="checkbox" checked rel="ingredient-3"> ingredient 3 </label><br><input type="text" class='txtCal' /><br>
<span><b>TOTAL :</b></span><b><span id="total_sum_value"></span></b>
</div>
<ul class="results">
<li class="ingredient-1 ingredient-3">Alpha isomethylionone</li>
<li class="ingredient-1">Amyl cinnamal (Jasmonal A)</li>
<li class="ingredient-1">Amylcinnamyl alcohol</li>
<li class="ingredient-1">Anisyl alcohol</li>
<li class="ingredient-1 ingredient-2">Benzyl alcohol</li>
<li class="ingredient-1 ingredient-2 ingredient-3">Benzyl benzoate</li>
<li class="ingredient-2">Benzyl cinnamate</li>
<li class="ingredient-2">Benzyl salicylate</li>
<li class="ingredient-2">Butylphenyl methylpropional (Lilial)</li>
<li class="ingredient-2 ingredient-3">Cinnamal</li>
<li class="ingredient-3">Cinnamyl alcohol</li>
<li class="ingredient-3">Citral</li>
<li class="ingredient-3">Citronellol</li>
<li class="ingredient-3">Coumarin</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句