jquery - 如何根据选择一组单独的单选按钮来更改按钮的“值”和“id”

Question

我有一个包含两个单选按钮和一个按钮的表单。我想根据选择的两个单选按钮中的哪一个来更改按钮的值。我的猜测是使用 jQuery 比使用 PHP 更好，但如果这是错误的假设，请告诉我。

这是 HTML 的示例：

<form>
  <ul>
    <li>
     <input type="radio" name="basic" value="basic1">
     <label for="basic1">Basic 1</label>
    </li>
    <li>
    <input type="radio" name="basic" value="basic2">
    <label for="basic2">Basic 2</label>
    </li>
  </ul>
  <button id="basic1" name="startReg" type="submit" value="basic1">Confirm</button>
</form>

简而言之，我想用选中的单选按钮的值替换按钮 id 和值。因此，如果选择了第二个单选按钮，则按钮标签将如下所示：

<button id="basic2" name="startReg" type="submit" value="basic2">Confirm</button>

Answer 1

你可以这样做：

$(':radio').on('change', function() {

  // this.value for get the id of radio

  $('button[name=startReg]')
                        .attr('id', this.value )   // change id of button
                        .val( this.value );        // update value of button
});

演示

但选定radio的值将自动提交。

Answer 2

$('input:radio').click(function(){
  $('button').prop({'id' : $(this).val(), 'value' : $(this).val()});   
});

Answer 3

只需更改控件的名称，它将发送与更改按钮值相同的表单数据：

<form>
  <ul>
    <li>
     <input type="radio" name="startReg" value="basic1" checked="checked">
     <label for="basic1">Basic 1</label>
    </li>
    <li>
    <input type="radio" name="startReg" value="basic2">
    <label for="basic2">Basic 2</label>
    </li>
  </ul>
  <button id="basic1" name="somethingElse" type="submit">Confirm</button>
</form>