Tetapkan nilai awal ke tombol radio seperti yang dicentang


Jawaban:


171

Anda dapat menggunakan checkedatribut untuk ini:

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

13
Anda juga dapat menyebutkan atribut itu tanpa nilai yang ditetapkan, yaitu <input type = "radio" diperiksa>
niksvp

1
@niksvp Saya yakin diperiksa = "diperiksa" adalah cara yang valid untuk memeriksa awal tombol radio - hanya menggunakan "diperiksa" bukan HTML yang valid (meskipun didukung oleh sebagian besar browser)
Matt Healy

10
@ Matthewh - nah, Anda dapat menggunakan hanya "dicentang" sendiri dan ini adalah HTML yang valid (meskipun bukan XHTML yang valid). Secara pribadi saya lebih suka 'diperiksa = "diperiksa"', tetapi Anda tidak harus menggunakannya ... memang, ada alasan yang cukup kuat untuk tidak menggunakannya.
Algy Taylor

55

Anda bisa menggunakan:

<input type="radio" checked />

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


seperti yang dinyatakan @Matt Healey, menggunakan kotak centang tanpa atribut bukan HTML yang valid
salvob

16
@salvob salah. ini bukan X html yang valid , namun ini sepenuhnya valid untuk HTML5 yang merupakan standar global seperti yang pernah ada.
Chris Marisic

15

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.


Memang! Jawaban di atas tidak berfungsi dengan Angular JS. Jawaban Anda menyelesaikan masalah saya. Terima kasih! :)
Mitaksh Gupta

3

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.


2

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 ..


Penyebabnya ng-checked="true"adalah dari repertoar angularjs.
Augustas

Atau setel nilai model di pengontrol ke "benar". Hati-hati jika Anda menyetelnya ke string, bukan Boolean!
Thomas David Kehoe

2

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" />

1

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

0

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"}
 />
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.