亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

獲取任意給定點所有選中的復選框值

獲取任意給定點所有選中的復選框值

當年話下 2023-07-14 15:29:21
我被困在某一點上,無法繼續前進。我正在嘗試實現下面這樣的事情。這個想法是實現這一點,如果選中的復選框長度大于 2,則顯示計數,否則顯示復選框的值。我能夠在選中的復選框中成功,但當用戶首先選中復選框然后取消選中時無法實現。請看片段。我在任何時候需要的輸出是檢查復選框長度是否大于 2,然后執行適當的操作。您能否對此提供一些說明?checkboxLength = 0;$('input[name="checkname[]"]').click(function() {  checkboxval = $(this).val();  if ($(this).prop("checked")) {    checkboxLength++;    if (checkboxLength > 2) {      $('.selecteditems').html('<span>' + checkboxLength + ' Options selected</span>');    } else {      $('.selecteditems').append('<span>' + checkboxval + '</span>');    }  } else {    checkboxLength = checkboxLength - 1;    $('.selecteditems').html('<span>' + checkboxLength + ' Options selected</span>');  }});<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>我被困在其他部分。IE。也就是說,如果復選框未選中且長度小于或等于 2。
查看完整描述

2 回答

?
HUWWW

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>


查看完整回答
反對 回復 2023-07-14
?
繁星點點滴滴

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>

請讓我知道這種方法是否正確或者我是否需要進行任何修改。



查看完整回答
反對 回復 2023-07-14
  • 2 回答
  • 0 關注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號