กำหนดค่าเริ่มต้นให้กับปุ่มตัวเลือกตามที่เลือก

ฉันจะกำหนดค่าของปุ่มตัวเลือกเริ่มแรกให้ตรวจสอบใน HTML ได้อย่างไร

คุณสามารถใช้checkedคุณสมบัตินี้:

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

คุณสามารถใช้:

<input type="radio" checked />

checked="checked"โดยใช้เพียงแอตทริบิวต์การตรวจสอบโดยไม่ต้องระบุค่าเป็นเช่นเดียวกับ

ฉันได้ตอบคำถามนี้ในคำถามที่คล้ายกันซึ่งทำเครื่องหมายว่าซ้ำกับคำถามนี้ คำตอบช่วยคนจำนวนมากพอสมควรดังนั้นฉันคิดว่าฉันจะเพิ่มที่นี่ด้วยในกรณี

นี่ไม่ใช่คำตอบที่ถูกต้อง แต่สำหรับใครก็ตามที่ใช้ AngularJS พยายามที่จะทำให้ได้คำตอบนั้นแตกต่างกันเล็กน้อย และจริงๆแล้วคำตอบปกติจะไม่ทำงาน (อย่างน้อยก็ไม่ได้สำหรับฉัน)

html ของคุณจะดูคล้ายกับปุ่มตัวเลือกปกติ:

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

ในตัวควบคุมของคุณคุณจะได้ประกาศสิ่งmValueที่เกี่ยวข้องกับปุ่มตัวเลือก หากต้องการเลือกปุ่มตัวเลือกปุ่มใดปุ่มหนึ่งเหล่านี้ให้กำหนด$scopeตัวแปรที่เกี่ยวข้องกับกลุ่มให้กับค่าอินพุตที่ต้องการ:

$scope.mValue="second"

สิ่งนี้ทำให้เลือกปุ่มตัวเลือก "ที่สอง" ในการโหลดหน้า

สำหรับทุกคนที่กำลังมองหาโซลูชัน Angular2 (2.4.8) เนื่องจากเป็นคำถามที่นิยมทั่วไปเมื่อทำการค้นหา:

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

สิ่งนี้จะเพิ่มแอcheckedททริบิวไปยังอินพุตที่กำหนดเงื่อนไข แต่จะไม่เพิ่มอะไรเลยหากเงื่อนไขล้มเหลว

อย่าทำสิ่งนี้:

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

เพราะสิ่งนี้จะเพิ่มแอททริบิวต์checked="false"ให้กับอิลิเมนต์อินพุตอื่น ๆ

เนื่องจากเบราว์เซอร์จะมองหาการมีอยู่ของcheckedแอตทริบิวต์ ( คีย์ ) เท่านั้นโดยไม่สนใจค่าดังนั้นการป้อนข้อมูลครั้งสุดท้ายในกลุ่มจะถูกตรวจสอบ

วิธีอื่นในการตั้งค่าการตรวจสอบเริ่มต้นบนปุ่มตัวเลือกโดยเฉพาะอย่างยิ่งถ้าคุณใช้ angularjs กำลังตั้งค่าสถานะ 'ตรวจสอบ ng' เป็น "true" เช่น: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

checked = "checked" ไม่ทำงานสำหรับฉัน ..

โปรดทราบว่าหากคุณมีปุ่มตัวเลือกสองปุ่มที่มีแอตทริบิวต์ "ชื่อ" เหมือนกันและพวกเขามีแอตทริบิวต์ "ที่จำเป็น" จากนั้นการเพิ่มแอตทริบิวต์ "ที่ตรวจสอบแล้ว" จะไม่ทำการตรวจสอบ

ตัวอย่าง: สิ่งนี้ทำให้ปุ่มตัวเลือกทั้งสองยังคงไม่ถูกตรวจสอบ

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

สิ่งนี้จะทำให้ปุ่มตัวเลือก "ตัวผู้" ถูกตรวจสอบ

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

ฉันไปงานปาร์ตี้ช้าและฉันรู้ว่า OP กล่าว html แต่ถ้าคุณต้องการทำสิ่งนี้ใน MVC คุณสามารถตั้งค่าtrueในพารามิเตอร์ที่สาม

เช่น:

    <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

หากคุณใช้ react-redux สำหรับแอปพลิเคชันของคุณและหากคุณต้องการแสดงข้อมูลที่อยู่ใน redux store คุณสามารถตั้งค่าตัวเลือก "checked" ตามด้านล่าง

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