我有一个代码,可以对选定的复选框进行计数,并在div中显示它们。
我尝试了许多没有成功的事情,我想要实现的目标是:
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>
答案 0 :(得分:1)
在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>
答案 1 :(得分:0)
您可以在下面尝试
$('input[type="checkbox"]').change(function() {
$('#result').html(getCount());
});
$('#selected').bind('input propertychange', function() {
$('#result').html(getCount());
});
function getCount() {
var selected = {
checkBoxCount: 0,
textBoxCount: 0
};
var number_of_checkboxes = $('input[type="checkbox"]:checked').length;
selected.checkBoxCount += number_of_checkboxes;
selected.textBoxCount = $('#selected').val() == '' ? 0 : 1;
return selected.checkBoxCount + selected.textBoxCount;
}
<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>