單選框input:radio

 

單選框

CreateTime--2017年5月15日11:40:04

Author:Marydon

四、單選框

　　（一）語法

　　　　<input type="radio"/>

　　（二）實現點擊文字，選中對應按鈕的兩種方式

　　方式一：label標簽體包住單選框標簽

<label class="radioStyle"><input type="radio" class="radioStyle" name="test1" value="0" checked/>男</label>
<label class="radioStyle"><input type="radio" class="radioStyle" name="test1" value="1"/>女</label　　

　　方式二：label標簽體只包住文本

<input type="radio" class="radioStyle" name="test2" value="0" id="yes"/><label for="yes" class="radioStyle">是</label>
<input type="radio" class="radioStyle" name="test2" value="1" id="no" checked/><label for="no" class="radioStyle">否</label>

　　注意：

　　　　1.同一組單選框必須使用同一個name；

　　　　2.單選框沒有默認選中值，要想默認選中，必須聲明checked屬性；

　　　　3.方式二label標簽的for屬性的值必須與單選框的id值保持一致。

　　（三）單選框的onchange事件

　　示例：

　　　　通過單選框的選中狀態來實現其他元素的顯示或隱藏

　　　　第一部分：HTML

是否替診
<label style="cursor: pointer;">
    <input type="radio" name="REPLACE_TZ" value="0" style="cursor: pointer;"
        onchange="$('#REPLACE_TZ_NAME').show();"/>
    是
</label>    
<label style="cursor: pointer;">
    <input type="radio" name="REPLACE_TZ" value="1" style="cursor: pointer;"
        onchange="$('#REPLACE_TZ_NAME').hide();" checked/>
    否
</label>
替診醫生名稱
<select id="REPLACE_TZ_NAME" name="REPLACE_TZ_NAME" style="display: none;">
    <option value="">請選擇</option>            
    <option value="1">醫生一</option>            
    <option value="2">醫生二</option>            
    <option value="3">醫生三</option>            
</select>

　　注意：

　　　　1.同一組單選框必須使用同一個name；

　　　　2.同一組的每個單選框都得綁定onchange事件；

　　　　3.單選框及復選框的onchange事件在IE瀏覽器運行時存在的問題：

　　　　　　在IE中卻不會正常執行，即選中或取消復選框不會立即執行

　　　　　原因：

　　　　　　IE會等到單選框或復選框失去焦點之后才會觸發onchange事件

　　　　　解決方案：

　　　　　　綁定點擊事件，手動觸發失焦、聚焦事件　　

　　　　第二部分：JAVASCRIPT

/**
 * 判斷是否是IE瀏覽器，支持IE6-IE11
 */
function isIE() { //ie?
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;
    else
        return false;
}
window.onload = function () {
    if(!isIE()) return;
    /*
     * 是否替診，單選框綁定點擊事件
     */
    $('input:radio[name=REPLACE_TZ]').click(function () { 
        this.blur(); 
        this.focus(); 
    });
}

　　實現效果： 　

　　　　單選框被選中時，顯示隱藏的下拉框，取消選中時，再隱藏下拉框。

　　UpdateTime--2017年6月13日14:51:06

　　（四）單選框設置默認選中項

　　單選框沒有默認選中項，如果需要指定選項選中，需要在該單選框添加屬性：checked

　　舉例：

<label class="radioCss">
    <input name="CANCEL_CONSULT" type="radio" value="1" checked/>
    不再需要
</label>
<label class="radioCss">
    <input name="CANCEL_CONSULT" type="radio" value="2" />
    患者轉院
</label>
<label class="radioCss">
    <input name="CANCEL_CONSULT" type="radio" value="3" />
    其他
</label>

2019年12月23日

　　jQuery獲取選中單選框的值

var sex = $("input[name='LSSEX']:checked").val();

　　

 相關推薦：

• 類似文章