javascript - 按钮而不是复选框

Question

我使用复选框覆盖数据库条目，它看起来像这样:

[ ] Overwrite 
[Submit]

我想将复选框和提交按钮更改为这样的单个按钮:

[Overwrite]

Checkbox Overwrite函数在js中是这样工作的:

if(jQuery("#overwrite").prop("checked")){
    data+="&overwrite=on";
}   

在 html 中看起来像这样:

<input type="checkbox" id="overwrite" name="overwrite"> Overwrite

我尝试在 js 中执行以下操作以使用按钮而不是复选框:

jQuery('#overwrite').click(function(){
    data+="&overwrite=on";
});

在 html 中，按钮如下所示:

<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary">Overwrite</button>

按钮不起作用，如果我点击它，什么也不会发生。我做错了什么？

Answer 1

它可以简单地作为一个切换按钮，使用一个简单的类来显示，如下例所示:

jQuery('#overwrite').click(function(){
    $(this).toggleClass('selected');
    
    if( $(this).hasClass('selected') ){
      //data+="&overwrite=on";
      console.log( "overwrite=on" ); 
    }
});

.selected{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary">Overwrite</button>