easyui-radiobutton 无法用js控制 checked属性

最新推荐文章于 2024-04-10 05:55:21 发布

雨落亦红尘

最新推荐文章于 2024-04-10 05:55:21 发布

阅读量3.1k

点赞数

分类专栏：日常文章标签：程序日常

本文链接：https://blog.csdn.net/War_Knights/article/details/89634447

版权

日常专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在平常写代码的时候用到了 easyui-radiobutton 无法用js控制其checked属性是否被选中状态，后来放弃了用easyui，用了input type=radio（有方法控制的话希望分享一波），解决代码如下
PS：附带了更改radio按钮css样式，让其变的好看点

html代码

 <form>
         <div id="choiceBtton" style="float: left;width: 50%;">
         	<input  type="radio" name="examType" value="1"  id="choiceBtn"><label for="choiceBtn">单选</label></div>
         <div id="checkingButton"  style="float: right;width: 50%;">
        	 <input  type="radio" name="examType" value="2"  id="checkingBtn"><label for="checkingBtn">判断</label></div>
</form>

ps：label中的for名字要和对应input的id相同
js代码

$("#choiceBtn").prop("checked",true);

true为选中状态，false为未选中状态
css代码:方法一
这里让radio变的漂亮点

input[type="radio"] {
    width: 20px;
    height: 20px;
    opacity: 0;
}
input[type="radio"] + label::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: text-bottom;
    border: 1px solid #d9d9d9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
}
input[type="radio"]:checked +  label::before {
    background-color: white;
    background-clip: content-box;
    border-color: #79a0ff;
    border-width: 5px;
}

css代码：方法二

input[type='radio'] {
            position: absolute;
            opacity: 0;
            height: 21px;
            width: 21px;
            margin-top: 8px;
        }

input[type='radio'] + label::before {
    content: '';
    border: 2px solid #95B8E7;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    padding: 3px;
    display: inline-flex;
    margin-right: 5px;
}

input[type='radio']:checked + label::before {
    background-color: #95B8E7;
    background-clip: content-box;
    padding: 3px;
}

借鉴文章：
更改radio css样式