如果我点击单选按钮，名称必须更改

Question

如果我点击单选按钮，名称必须更改怎么办。例如，如果我单击 Issue 单选按钮，Security Name 但更改为 Recipient，或者如果我单击 Return 单选按钮，Security Name 必须更改为“Return by”。我不知道该怎么做。有办法吗？

<div class="col-sm-8 radio" style="margin-left: 60px;">
    <p class="form-control-static" style="display: inline-flex;white-space: break-spaces;">
        <label><input type="radio" name="status" onclick="check(this.value)" value="issue" ><b>Issue</b></label>
        <br>
        <label><input type="radio" name="status" onclick="check(this.value)" value="returnn" ><b>Return</b></label>
    </p>
  </div>

第二个代码用于显示安全名称。

<label class="control-label col-sm-5" for="badgeid" style="margin-left: -50px;">Security Name:</label>
  <div class="col-sm-4">
    <p class="form-control-static" style="margin-top: -6px;">
        <input type="text" class="form-control" id="secuname" name="secuname" placeholder="Enter Name" value="<?php echo $securityname; ?>">
    </p>
  </div>
  <div class="col-sm-10"></div>
  <br>

Answer 1

您可以在收音机上收听更改事件：

let radios = document.querySelectorAll('input[type=radio][name="status"]');
radios.forEach(radio => {

    radio.addEventListener('change', (radio) => {
       let value = radio.value
       // hide all irrelevant inputs
       let divs = document.querySelectorAll('div.depend-on-radio-status');
       divs.forEach(div => {
           divs.style.display = 'none';
       })
       // show relevant input
       let div = document.querySelector('div.depend-on-radio-status.value-' + value);
       div.style.display = 'block'
    })
});

// set the default value here in the style
<div class="depend-on-radio-status value-issue" style="display:block">
// your issue input / label
<div>
<div class="depend-on-radio-status value-return" style="display:none">
// your return input / label
</div>

Answer 2

这是你的答案（最后的代码部分）

<div class="col-sm-8 radio" style="margin-left: 60px;">
    <p class="form-control-static" style="display: inline-flex;white-space: break-spaces;">
    <label><input type="radio" name="status" onclick="check(this.value)" value="issue" ><b>Issue</b></label>
    <br>
    <label><input type="radio" name="status" onclick="check(this.value)" value="returnn" ><b>Return</b></label>
    </p>
</div>

<label class="control-label col-sm-5" for="badgeid" style="margin-left: -50px;">Security Name:</label>

<div class="col-sm-4">
    <p class="form-control-static" style="margin-top: -6px;">
        <input type="text" class="form-control" id="secuname" name="secuname" placeholder="Enter Name" value="<?php echo $securityname; ?>">
      </p>
</div>

这就是您的代码，现在您希望在注释中执行的 JS 根据另一个单选按钮输入更改输入的名称

在这里

var statusRadioButtons = document.getElementsByName('status');
var specialInput = document.querySelector('#secuname') ;
statusRadioButtons.forEach( item => item.addEventListener("change",handleChangeName)) 
function handleChangeName(ev) {
    var value = ev.target.value;
    if( value == "issue" ) {
         specialInput.setAttribute('name','receipt') ;
    } else if ( value == "returnn" ) { 
         specialInput.setAttribute('name','returnBy') ;
    } 
}

如果我点击单选按钮，名称必须更改

If I click on Radio button, name must be change

html

radio-button

这是你的答案（最后的代码部分）

在这里