Sao chép đài phát thanh giá trị sử dụng ID của nó để chèn vào đầu vào như giá trị sử dụng JavaScript

Question

Tôi có một số mã HTML như sau:

<input name="bid" type="radio" value="1" id="1234"/> 
<input name="bid" type="radio" value="2" id="5678"/> 
<input type="text" id="paymount" name="paymount" value=""/> 

chức năng mong muốn:

Khi radio=1 được kiểm tra, giá trị paymount trường sẽ hiển thị là 1234. Khi radio=2 được chọn, giá trị trường paymount sẽ hiển thị là 5678.

Tôi đã tìm thấy bài đăng trên Stack Overflow, nhưng rất nhiều trong số đó có liên quan đến việc ẩn trường văn bản.

Answer 1

<form name="radioForm"> 
    <input name="bid" type="radio" value="1" id="1234"/> 
    <input name="bid" type="radio" value="2" id="5678"/> 
    <input type="text" id="paymount" name="paymount" value=""/> 
</form>  

<script type="text/javascript"> 
    var radio = document.radioForm.bid, 
     input = document.getElementById('paymount'); 

    for(var i = 0; i < radio.length; i++) { 
     radio[i].onclick = function() {    
      input.value = this.id; 
     }; 
    } 
</script> 

jsFiddle

Answer 2

Sử dụng trình xử lý sự kiện thay đổi để nghe sự kiện.

// use `[].slice.call(document.querySelectorAll('[name="bid"]')) 
 
// for older browser to covert NodeList to Array 
 

 
// although check polyfill option of `ArrayforEach` for older browser 
 
// or use simple `for` or `while` loop for iterating 
 

 
// get all radio with the name,covert NodeList to array and iterate 
 
Array.from(document.querySelectorAll('[name="bid"]')).forEach(function(ele) { 
 
    // add event handler to the element 
 
    ele.addEventListener('change', function() { 
 
    // update value of the input element 
 
    document.getElementById('paymount').value = this.id; 
 
    // if you are used `data-id="value" attribute instead of `id` 
 
    // then get the value using `this.dataset.id` 
 
    }); 
 
});

<input name="bid" type="radio" value="1" id="1234" /> 
 
<input name="bid" type="radio" value="2" id="5678" /> 
 
<input type="text" id="paymount" name="paymount" value="" />

---

FYI: Sử dụng tùy chỉnh data-* attribute để lưu trữ các mục đích giá trị tương ứng của id thuộc tính là để xác định duy nhất một phần tử. Giá trị data-* attribute tùy chỉnh có thể được truy lục từ dataset thuộc tính của phần tử.

Answer 3

Tôi không chắc liệu đây có phải là giải pháp tốt nhất hay không, nhưng những điều sau đây hoạt động khi bạn cần.

var inputs = document.querySelectorAll('input[name="bid"]'), 
 
    paymount = document.getElementById('paymount'); 
 

 
// loop over element, and add event listener 
 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].addEventListener("change", onChange); 
 
} 
 
// callback 
 
function onChange(){ 
 
    paymount.value = this.id; // change paymount value to the selected radio id 
 
}

<input name="bid" type="radio" value="1" id="1234"/> 
 
<input name="bid" type="radio" value="2" id="5678"/> 
 
<input type="text" id="paymount" name="paymount" value=""/>

Answer 4

<script> 
    function getradio(i) 
    { 
     document.getElementById("paymount").value=i; 
    } 
</script> 

<input name="bid" type="radio" value="1" id="1234" onclick="getradio(1234)"/> 
<input name="bid" type="radio" value="2" id="5678" onclick="getradio(5678)"/> 

<input type="text" id="paymount" name="paymount"/> 

Bạn có thể sử dụng JavaScript và gọi một chức năng bằng cách sử dụng các sự kiện onclick trên một nút radio và vượt qua giá trị mong muốn.