我有一个代码,可以计算选定的复选框并在div中显示它们。
我尝试了不同的尝试而没有成功,我想要实现的目标如下:
填充文本区域时(文本长度> 1)->将1添加到结果中。
当用户键入某些内容(应该是实时的)时,在结果中加1;当用户删除文本区域中的所有内容时,将结果加1。
Count selected checkboxes (CodePen)
$('input[type="checkbox"]').change(function() {
var selected = 0;
var number_of_checkboxes = $('input[type="checkbox"]:checked').length;
selected += number_of_checkboxes;
$('#result').html(selected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
<label for="text1">
<input type="checkbox" name="text1" id="text1" value="1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</label>
<br>
<label for="text2">
<input type="checkbox" name="text2" id="text2" value="1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</label>
<br>
<label for="text3">
<input type="checkbox" name="text3" id="text3" value="1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</label>
<br>
<br>
<textarea id="selected" minlength="20" name="selected" placeholder="Lorem ipsum dolor sit amet" style="width: 500px; height: 100px;"></textarea>
<div id="result">0</div>
</div>
最佳答案
在input
和textarea
上使用checkbox
事件
$('input[type="checkbox"], #selected').on('input', function() {
var checkboxes = $('input[type="checkbox"]:checked').length;
var textarea = $('#selected').val() ? 1 : 0;
$('#result').html(checkboxes + textarea);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
<label for="text1">
<input type="checkbox" name="text1" id="text1" value="1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</label>
<br>
<label for="text2">
<input type="checkbox" name="text2" id="text2" value="1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</label>
<br>
<label for="text3">
<input type="checkbox" name="text3" id="text3" value="1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</label>
<br>
<br>
<textarea id="selected" minlength="20" name="selected" placeholder="Lorem ipsum dolor sit amet" style="width: 500px; height: 100px;"></textarea>
<div id="result">0</div>
</div>