Gán một giá trị ban đầu cho nút radio khi được chọn

Làm cách nào để chỉ định giá trị của nút radio ban đầu khi được kiểm tra trong HTML?

Bạn có thể sử dụng checkedthuộc tính cho việc này:

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

Bạn chỉ có thể sử dụng:

<input type="radio" checked />

Chỉ sử dụng thuộc tính được kiểm tra mà không nêu giá trị là giống như checked="checked".

Tôi đã đặt câu trả lời này cho một câu hỏi tương tự được đánh dấu là bản sao của câu hỏi này. Câu trả lời đã giúp được một lượng người kha khá nên tôi nghĩ tôi cũng sẽ thêm nó vào đây.

Điều này không trả lời chính xác câu hỏi nhưng đối với bất kỳ ai sử dụng AngularJS đang cố gắng đạt được điều này, câu trả lời hơi khác nhau. Và thực sự câu trả lời bình thường sẽ không hiệu quả (ít nhất là nó không dành cho tôi).

Html của bạn sẽ trông khá giống với nút radio bình thường:

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

Trong bộ điều khiển của bạn, bạn sẽ khai báo mValuecái được liên kết với các nút radio. Để chọn một trong các nút radio này, chỉ định $scopebiến được liên kết với nhóm với giá trị đầu vào mong muốn:

$scope.mValue="second"

Điều này làm cho nút radio "thứ hai" được chọn khi tải trang.

Đối với bất kỳ ai đang tìm kiếm một giải pháp Angular2 (2.4.8), vì đây là một câu hỏi phổ biến khi tìm kiếm:

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

Điều này sẽ thêm checkedthuộc tính vào đầu vào cho điều kiện, nhưng sẽ không thêm gì nếu điều kiện không thành công.

Đừng làm điều này:

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

bởi vì điều này sẽ thêm thuộc tính checked="false"cho mọi yếu tố đầu vào khác.

Vì trình duyệt chỉ tìm kiếm sự hiện diện của checkedthuộc tính ( khóa ), bỏ qua giá trị của nó, do đó, đầu vào cuối cùng trong nhóm sẽ được kiểm tra.

Một cách khác để đặt mặc định được kiểm tra trên các nút radio, đặc biệt nếu bạn đang sử dụng angularjs là đặt cờ 'ng-check' thành "true", ví dụ: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

kiểm tra = "đã kiểm tra" không hoạt động đối với tôi ..

Lưu ý rằng nếu bạn có hai nút radio có thuộc tính "name" giống nhau và chúng có thuộc tính "bắt buộc", thì việc thêm thuộc tính "đã kiểm tra" vào chúng sẽ không khiến chúng được kiểm tra.

Ví dụ: Điều này làm cho cả hai nút radio vẫn không được kiểm tra.

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

Điều này sẽ làm cho nút radio "nam" được kiểm tra.

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

Tôi đến bữa tiệc muộn một chút và tôi biết OP đã nói html, nhưng nếu bạn cần làm điều này trong MVC, bạn có thể đặt truetrong param thứ ba.

ví dụ:

    <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

Nếu bạn đang sử dụng Reac-redux cho ứng dụng của mình và nếu bạn muốn hiển thị dữ liệu trong cửa hàng redux, bạn có thể đặt tùy chọn "đã kiểm tra" như bên dưới.

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