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>

Answer 2

var data = "";
$('#overwrite').on('click', function() {
  if (!$(this).hasClass('overwrite')) {
    data += "&overwrite=on";
  }
  
  $(this).toggleClass('overwrite');
});

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

按钮代替复选框

2 个答案: