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

在平常写代码的时候用到了 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样式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值