How to Select a Radio Button by Default

How to select a radio button by default?

XHTML solution:

<input type="radio" name="imgsel" value="" checked="checked" />

Please note, that the actual value of checked attribute does not actually matter; it's just a convention to assign "checked". Most importantly, strings like "true" or "false" don't have any special meaning.

If you don't aim for XHTML conformance, you can simplify the code to:

<input type="radio" name="imgsel" value="" checked>

Select first radio button by default

You can simply add .eq(0).click()

$('.radiogroup').change(function(e) {  const $this = $(this), $link = $("#url");  $link.html($this.val());  $link.attr("href", $this.attr("data-url"));}).eq(0).click(); //<<<<<<< here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" /><input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>

How to set the state when radio button is by default checked?

If you are using checkbox and the first is by default selected, then you can initialise your state with the first value present in the state like useState(props.selectedCustomItem.variants[0])

const [variantOption, setVariantOption] = useState();
const [variant, setVariant] = useState(props.selectedCustomItem.variants[0]);

useEffect(() => {
  if (variantOption == null && variant && variant.length > 0) {
    setVariantOption(variant.options[0]);
  }
}, [variantOptions, variant]);

props.selectedCustomItem.variants.map((variant, index) => {
{variant.options.map((option, index) => {
<input
type="radio"
name="variant-select"
id="variant-select"
defaultChecked={index === 0}
value={option.price}
onChange={(e) => {
setVariantOption(option);
setVariant(variant);
}}
/>}
<button
  onClick={() => {
    props.addFoodItems(variant, variantOption);
  }}
>add item</button>

Also, I assume that props.selectedCustomItem.variants is not null or undefined.

How to set default value for radio button in react?

You should use checked on your radiobuttton:

<label htmlFor="admin">Admin</label>
<input
  className="ml-2 mr-2"
  type="radio"
  name="emp_role"
  checked={emp_role === 'admin'}
  value="admin"
  id="admin"
  onChange={e => handleEmployeeForm(e)}
/>
<label htmlFor="representative">Representative</label>
<input
  className="ml-2 mr-2"
  type="radio"
  name="emp_role"
  value="representative"
  checked={emp_role === 'representative'}
  id="representative"
  onChange={e => handleEmployeeForm(e)}
/>

HTML default value fo radio button input type based on python variable

You need to set the variable name in render_template by passing it as keyword:

@app.route('/', methods=['GET','POST'])
def params_form():

    value = 2
    value_dict = {'1': 1==value, '2': 2==value, '3': 3==value}
    
    return render_template('home/sheet.html', value_dict=value_dict)

<div>
    <input type="radio" id="n1" name="nyears" value=1  {{ 'checked' if value_dict["1"] else '' }} >
        <label for="n1"> 1 </label>

    <input type="radio" id="n2" name="nyears" value=2  {{ 'checked' if value_dict["2"] else '' }} >
        <label for="n2"> 2 </label>

    <input type="radio" id="n3" name="nyears" value=3  {{ 'checked' if value_dict["3"] else '' }} >
        <label for="n3"> 3 </label>
</div>

How to Select a Radio Button by Default