2 回答

TA貢獻1874條經驗 獲得超12個贊
這是實現目標的一種方法:
const $cn = $('input[name="checkname[]"]');
$cn.on('change', function() {
const checkedLength = $cn.filter(':checked').length;
console.log( checkedLength );
const vals = $cn.filter(':checked').map((i,f) => f.value).get().join(',');
const output = checkedLength > 2 ? `${checkedLength} options selected.` : vals;
$('div.selecteditems').html( $('<span/>').text( output ) );
});
現場演示
$(function() {
const $cn = $('input[name="checkname[]"]');
$cn.on('change', function() {
const checkedLength = $cn.filter(':checked').length;
console.log( checkedLength );
const vals = $cn.filter(':checked').map((i,f) => f.value).get().join(',');
const output = checkedLength > 2 ? `${checkedLength} options selected.` : vals;
$('div.selecteditems').html( $('<span/>').text( output ) );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selecteditems"></div>
<div class="containerdiv">
<input type="checkbox" name="checkname[]" value="Value 1">
<label for="checkbox1">Value 1</label>
<input type="checkbox" name="checkname[]" value="Value 2">
<label for="checkbox2">Value 2</label>
<input type="checkbox" name="checkname[]" value="Value 3">
<label for="checkbox3">Value 3</label>
<input type="checkbox" name="checkname[]" value="Value 4">
<label for="checkbox4">Value 4</label>
<input type="checkbox" name="checkname[]" value="Value 5">
<label for="checkbox5">Value 5</label>
</div>

TA貢獻1803條經驗 獲得超3個贊
const $cn = $('input[name="checkname[]"]');
$cn.on('change', function() {
? const checkedLength = $cn.filter(':checked').length;
? const vals = $cn.filter(':checked').map((i, f) => f.value).get();
? finalCheckedValue = '';
? $.each(vals, function(index, checkedValue) {
? ? finalCheckedValue += '<span>' + checkedValue + '</span>';
? });
? output = checkedLength > 2 ? `${checkedLength} options selected.` : finalCheckedValue;
? $('div.selecteditems').html(output);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selecteditems"></div>
<div class="containerdiv">
? <input type="checkbox" name="checkname[]" value="Value 1">
? <label for="checkbox1">Value 1</label>
? <input type="checkbox" name="checkname[]" value="Value 2">
? <label for="checkbox2">Value 2</label>
? <input type="checkbox" name="checkname[]" value="Value 3">
? <label for="checkbox3">Value 3</label>
? <input type="checkbox" name="checkname[]" value="Value 4">
? <label for="checkbox4">Value 4</label>
? <input type="checkbox" name="checkname[]" value="Value 5">
? <label for="checkbox5">Value 5</label>
</div>
請讓我知道這種方法是否正確或者我是否需要進行任何修改。
添加回答
舉報