javascript - 计算选定复选框和文本区域的问题
问题描述
我有一个代码可以计算选中的复选框并将它们显示在一个 div 中。
我尝试了不同的事情但没有成功,我想要实现的目标如下:
- 当 textarea 被填充时(文本长度> 1) --> 将结果加 1。
- 当用户键入某些内容(应该是实时的)时,将结果加 1,当用户删除 textarea 中的所有内容时,删除 1。
$('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>
推荐阅读
- ios - 通过自定义 UITableViewCell 上的 UISwipeGestureRecognizer 更新 CoreData?
- docker - docker-compose 没有映射端口
- reactjs - 在 GatsbyJS 中更新元标记
- python-3.x - 是否可以清除 AWS Lambda 中的临时文件?
- ios - 如何使用 SwiftUI 设置图像的宽度和高度?
- azure-devops - 如何在 Azure DevOps 中启用 Docker 层缓存
- dynamics-crm - ms动态crm插件中的MSBUILD.MERGE.TASK错误
- excel - 《maatwebsite/excel 3.1》 导入导出excel时如何过滤excel的标题
- python - 如何从词干中排除某些名称和术语(Python NLTK SnowballStemmer (Porter2))
- google-cloud-data-fusion - 数据融合管道-牧马人转换不起作用