php - 独特的按钮jQuery

Question

我想要三个（或更多）普通按钮，我将在三张图片下方使用，只有一个会有“默认”文本，其他按钮会有“设置为默认”文本。

<input type="button" id="button1" value="Default" > 

<input type="button"id="button2"  value="Set as default" > 

<input type="button" id="button3"  value="Set as default" >  

单击“设置为默认值”时，此按钮的文本应更改为默认值，颜色也应更改..（以前的默认按钮现在将“设置为默认值”）

1. 我如何将 jquery 用于两个以上的按钮？
2. 当我将此发布到 php 时，我怎么知道哪个是默认值？
3. 如果您有任何其他建议/代码示例而不是按钮来选择默认图片，他们非常欢迎

Answer 1

$('input[type="button"]').on('click', function() {
  $('input[type="button"]').val('Set as default');
  $(this).val('Default');
});

PHP 将通过给它们命名来知道： (button1, 2, 3) - 值将是“默认”

<input type="button" id="button1" name="button1" value="Default" > 

<input type="button"id="button2"  name="button2"  value="Set as default" > 

<input type="button" id="button3"  name="button3"  value="Set as default" > 

Answer 2

1）您可以将选择器与逗号组合。

$("#button1, #button2, #button3").on("click", function(){
  $("#button1, #button2, #button3").val("Set as default");
  $(this).val("Default");
});

2）您可以添加一个隐藏输入来捕获您需要的任何内容（<input type='hidden' id='selectedbutton'>）。

$("#button1, #button2, #button3").on("click", function(){
  $("#button1, #button2, #button3").val("Set as default");
  $(this).val("Default");
  $("#selectedbutton").val($(this).attr("id"));
});

3) 单选按钮是一个不错的选择，因为它们强制只选择一个，并且还可以通知您的服务器。您仍然需要手动更改文本（除非您想使用 CSS）。

ETA：你提到想要控制颜色，也许还有其他风格。我建议您更好地利用类进行格式化和选择：

HTML

<input type="button" id="button1" class='btn-set-default btn-is-default' value="Default" > 
<input type="button"id="button2" class='btn-set-default' value="Set as default" >    
<input type="button" id="button3" class='btn-set-default' value="Set as default" >  

查询：

$(".btn-set-default").on("click", function(){
  $(".btn-set-default").removeClass("btn-is-default").val("Set as default");
  $(this).addClass("btn-is-default").val("Default");
  $("#selectedbutton").val($(this).attr("id"));
});

CSS

.btn-set-default { }
.btn-is-default { color:red; }

Answer 3

尝试-

$(function(){
    $(":button").click(function(){
      $(":button").prop('value','Set as default');
        $(this).prop('value', 'Default'); 
    });
});

http://jsfiddle.net/KDkqL/

以“默认”值发布的那个是被点击的那个。