How do I get the value of checked radio button in PyScript?

limitcracker 0
Viewed 42

I would like to make 3 radio buttons and I would like to get the value of checked one when I press a button.

<py-script>
<input id="rad1" name="choice" type="radio">
<label for="rad1">1</label>
<input id="rad2" name="choice" type="radio">
<label for="rad2">2</label>
<input id="rad3" name="choice" type="radio">
<label for="rad3">3</label>

<button id="btn">Go</button>

<py-script>
from js import document 
from pyodide import create_proxy

def on_btn_click(event):
    global choice
    checked_value = ___???___              ← ← ← ← ← ← ← ← ← ← ← ← ← ← ← ← ← ← ← 
    choice = checked_value

button = document.querySelector("#btn")
button.addEventListener("click", create_proxy(on_btn_click))
</py-script>

What is missing in the ??? ← ← ← ← ← ← ← in order to grab the checked value in the function handler?

pyscript python
2 Answers

You may check every radio button separatelly and use if/else to set correct value

document.querySelector("#rad1").checked

document.querySelector("#rad2").checked

document.querySelector("#rad3").checked

But if you have the same name in all radio buttons then you can use name and pseudo-selector :checked to get only checked radio button

document.querySelector("[name='choice']:checked").id

And if you add value="1" directly in radio button then you can get value

document.querySelector("[name='choice']:checked").value

BTW:

If you don't have other radio buttons with different name then you could reduce it to

document.querySelector(":checked").value

Minimal working code which displays selection in JavaScript console (in DevTools)

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>

<body>

<input id="rad1" type="radio" name="choice" value="1"><label for="rad1">1</label>
<input id="rad2" type="radio" name="choice" value="2"><label for="rad2">2</label>
<input id="rad3" type="radio" name="choice" value="3"><label for="rad3">3</label>
<button id="btn">Go</button>
    
<py-script>
from js import document 
from js import console
from pyodide import create_proxy

def on_btn_click(event):
    global choice
    
    console.log(event)
    #console.log('#rad1: ' + document.querySelector("#rad1").checked)
    #console.log('#rad2: ' + document.querySelector("#rad2").checked)
    #console.log('#rad3: ' + document.querySelector("#rad3").checked)
    console.log('id: ' + document.querySelector("[name='choice']:checked").id)
    console.log('value: ' + document.querySelector("[name='choice']:checked").value)

button = document.querySelector("#btn")
button.addEventListener("click", create_proxy(on_btn_click))
</py-script>

</body>
</html>

JavaScript Console in Firefox:

enter image description here

furas0

As someone in the comments said,

document.querySelector("#rad1").checked

should do the trick. You can do it this way in javascript and this is pretty much the same (ofc not identical but still).

Kneidl12020
Related