首页 > 解决方案 > 如何创建带有删除按钮的复选框

问题描述

如何创建一个像 1)单击编辑按钮-> 2)在前面数据中显示复选框(数据是导入表单 axios)--> 3)单击复选框以选择删除

html

<div class="gs-players-container">

        {{#each rooms}}

        <div class="player">
        {{addOne @index}} | {{alterName this}}
        
        <div style="margin:0" class="btn btn-small waves-effect waves-light remove-player">ลบผู้เล่น&lt;/div>
        </div>
        
        {{/each}}

JS代码

'click .remove-player'() {
        let check = load('กำลังลบผู้เล่น')
        axios.put(`${api_url}/my-gs/${this.id}`,
            { accept: 0 },
            { headers: { Authorization: 'Bearer ' + localStorage.getItem('pitch_token') } 
        }).then(res => {
            if (res.data.status == 'success') {
                check.dismiss()
                getGS()
            } else {
                console.log(res.data);
                check.dismiss()
                tellErr('ล้มเหลว กรุณาลองใหม่อีกครั้ง')
            }
        }).catch(err => {
            check.dismiss()
            tellErr(`${err}`)
        })

标签: javascripthtmlcheckboxaxiosclick

解决方案


选中复选框时,您可以使用类似的方法删除按钮。我不确定您对编辑和显示数据复选框的要求。如果你能向我们展示你到目前为止的尝试会更容易

function DeleteBtn() {

  var checkbox = document.getElementById('checkbox');

  if (checkbox.checked == true) {
    var button = document.getElementById('btn');
    button.parentNode.removeChild(button);
  }

}
<input type="checkbox" id="checkbox" onclick="DeleteBtn()" />

<input type="button" value="something" id="btn" />


推荐阅读