Tetapkan nilai awal ke tombol radio seperti yang dicentang

Bagaimana cara menetapkan nilai tombol radio pada awalnya seperti yang dicentang di HTML?

Anda dapat menggunakan checkedatribut untuk ini:

<input type="radio" checked="checked">

Anda bisa menggunakan:

<input type="radio" checked />

Hanya menggunakan atribut yang dicentang tanpa menyatakan nilainya sama dengan checked="checked".

Saya telah memberikan jawaban ini pada pertanyaan serupa yang ditandai sebagai duplikat dari pertanyaan ini. Jawabannya telah membantu banyak orang, jadi saya pikir saya akan menambahkannya di sini juga untuk berjaga-jaga.

Ini tidak benar-benar menjawab pertanyaan tetapi bagi siapa pun yang menggunakan AngularJS mencoba mencapai ini, jawabannya sedikit berbeda. Dan sebenarnya jawaban normal tidak akan berhasil (setidaknya tidak untuk saya).

HTML Anda akan terlihat sangat mirip dengan tombol radio biasa:

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second

Di pengontrol Anda, Anda akan menyatakan mValuebahwa yang terkait dengan tombol radio. Untuk memilih salah satu dari tombol radio berikut, tetapkan $scopevariabel yang terkait dengan grup ke nilai input yang diinginkan:

$scope.mValue="second"

Ini membuat tombol radio "kedua" dipilih saat memuat halaman.

Untuk siapa saja yang mencari solusi Angular2 (2.4.8), karena ini adalah pertanyaan yang populer secara umum saat mencari:

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

Ini akan menambahkan checkedatribut ke masukan yang diberikan kondisinya, tetapi tidak akan menambahkan apa-apa jika kondisinya gagal.

Jangan lakukan ini:

[attr.checked]="choice == defaultChoice"

karena ini akan menambahkan atribut checked="false"ke setiap elemen masukan lainnya.

Karena browser hanya mencari keberadaan checkedatribut ( kunci ), mengabaikan nilainya, maka masukan terakhir dalam grup akan diperiksa.

Cara lain untuk menyetel centang default pada tombol radio, terutama jika Anda menggunakan angularjs adalah menyetel bendera 'ng-check' ke "true" misalnya: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

check = "check" tidak bekerja untuk saya ..

Perhatikan bahwa jika Anda memiliki dua tombol radio dengan atribut "nama" yang sama dan keduanya memiliki atribut "diperlukan", menambahkan atribut "dicentang" ke sana tidak akan membuatnya dicentang.

Contoh: Ini membuat kedua tombol radio tetap tidak dicentang.

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

Ini akan membuat tombol radio "pria" dicentang.

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />

Saya agak terlambat ke pesta dan saya tahu OP mengatakan html, tetapi jika Anda perlu melakukan ini di MVC, Anda dapat mengatur truedi parameter ketiga.

misalnya:

    <p>Option One :@Html.RadioButton("options", "option1", true})</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2"})</p>
     //nothing will leave it unchecked

Jika Anda menggunakan react-redux untuk aplikasi Anda dan jika Anda ingin menampilkan data yang ada di toko redux, Anda dapat mengatur opsi "dicentang" seperti di bawah ini.

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "0"}
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "1"}
 />