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

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

動態循環復選框并獲取它們的值和 isChecked

動態循環復選框并獲取它們的值和 isChecked

守著一只汪 2023-04-27 16:09:10
我根據數據庫中的列表動態打印復選框,在代碼“coachProperties”中調用。每個 coachProperty 都會有自己的復選框,并附有唯一的文本。我想將其添加到另一個對象“屬性”中。像 'properties{text1 : "false, text2 : "true"} 之類的東西,然后稍后將它帶到服務器端進行一些過濾。我不想要任何 sumbit 按鈕,因為我希望它動態更新我有 js 代碼. 'properties' 中的所有值都將以“false”開頭,單擊復選框時應該會更新。問題是,有時當我取消選中一個框時,它仍然顯示為 true,反之亦然。    <div data-id="coachPropertiesCheckbox">                <% coachProperties.get('coachProperties').forEach(function (coachProperty) { %>                    <div class="checkboxes">                        <label>                        <input type="checkbox" data-id="test" value="<%= coachProperty.text %>"> <%= coachProperty.text %>                        </label>                        </label>                    </div>                <% }); %>            </div>js代碼:function setProp(obj,prop,value){            obj[prop] = value;            };            var properties = {};            coachProperties.get('coachProperties').forEach(function (coachProperty) {            properties[coachProperty.text] = "false";                     }); view.$el.find('[data-id="coachPropertiesCheckbox"] div.checkboxes input').change(function () {            var isCheckboxedChecked = view.$el.find('[data-id="test"]').is(':checked');            var valueCheckbox = $(this).attr("value");            setProp(properties, valueCheckbox, isCheckboxedChecked );            $.each( properties, function( key, value ) {                console.log( key + ": " + value );                });            });
查看完整描述

2 回答

?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

使用value屬性來保存您想要與復選框關聯的數據,不要使用它來切換true和false。checkbox是否被勾選,可以從checked屬性中得知。


一條建議,您很可能不想使用復選框標簽,因為value值用于內部目的,用于任何數據操作,而標簽的唯一目的是在 UI 中顯示。


請嘗試以下解決方案方向:


$('.checkboxes input').on('change', (event) => {

  const checked = $(event.target).prop('checked')

  const value = $(event.target).prop('value')

  console.log(checked, ':', value)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="checkboxes">

  <input type="checkbox" id="checkbox1-id" value="checkbox-1" /><label for="checkbox1-id">Checkbox 1</label>

  <input type="checkbox" id="checkbox2-id" value="checkbox-2" /><label for="checkbox2-id">Checkbox 2</label>

  <input type="checkbox" id="checkbox3-id" value="checkbox-3" /><label for="checkbox3-id">Checkbox 3</label>  

</div>


查看完整回答
反對 回復 2023-04-27
?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

   view.$el.find('div.checkboxes input').change(function (event) {


             var id = $(event.target).attr('data-id');


             if ($(event.target).prop('checked')) {


                 resultSetParameters.get('filter').coachProperties.push(id);


                 resultSetParameters.trigger('change');


             } else {


                 var index = resultSetParameters.get('filter').coachProperties.indexOf(id);


                 if (index > -1) {


                     resultSetParameters.get('filter').coachProperties.splice(index, 1);


                     resultSetParameters.trigger('change');


                 }


             }


            });


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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