前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >checkbox 和 radio 和 select 的使用

checkbox 和 radio 和 select 的使用

作者头像
Mshu
发布2018-10-31 10:52:47
1.6K0
发布2018-10-31 10:52:47
举报
文章被收录于专栏:咸鱼不闲咸鱼不闲

checkbox的使用

代码语言:javascript
复制
<input type="checkbox"  name="city" vlaue="徐州" />徐州
<br>
<input type="checkbox"  name="city" vlaue="无锡" />无锡
<br>
<input type="checkbox"  name="city" vlaue="苏州" />苏州
<br>
<input type="checkbox"  name="Country" vlaue="中国" />中国
<br>
<input type="checkbox"  name="Country" vlaue="俄罗斯" />俄罗斯

设置checkbox为单选

javascript部分

代码语言:javascript
复制
  $(function(){
    $(':checkbox[name=Country]').click(function(){
            if($(this).prop('checked')){
                $(':checkbox[name=Country]').prop("checked",false) ;
                $(this).prop("checked",true);
            }
        });
  })  

这样凡是设置name属性为Country的将变成单选,name为city的是多选。那么如何获得被选中的元素呢?

获得checkbox选中的内容

javascript部分

代码语言:javascript
复制
  $(function(){
        var city = "";
        $('input:checkbox[name=city ]:checked').each(function(){
            city += ($(this).val());
        });
  })

这里需要注意的是;通过上面方法获得的内容是input标签的value值,如果没有给value值,获得的都是no

jquery取消选中

代码语言:javascript
复制
    var code_Values = $('input:checkbox[name=abcd ]:checked');
    if(code_Values.length){
        for(var i=0;i<code_Values.length;i++)
        {
            code_Values[i].checked = false;
        }
    }else{
        code_Values.checked = false;
    }

radio的使用

下面是两组radio:

代码语言:javascript
复制
<input type="radio" checked="checked" name="sex_radio" id="man" value="man">男
<input type="radio" name="sex_radio" id="woman"  value="woman">女

<input type="radio" checked="checked" name="chinese_radio" value="yes">是
<input type="radio" name="chinese_radio" value="no">否

使用JavaScript获得第一组被选中的那个值

代码语言:javascript
复制
    var radio = document.getElementsByName("sex_radio")
    for(var i =0 ; i<radio.length;i++){
        if(radio[i].checked){
            console.log(radio[i].value)
        }
    }

使用juqery设置某选项被选中

代码语言:javascript
复制
    $("#man").attr("checked","checked")

checked="checked"属性是默认选中状态; name属性相同为一组; value是js获得的值;

select的使用

代码语言:javascript
复制
<select id="zh_select" >
    <option value="HSK">HSK</option>
    <option VALUE="TOCFL">TOCFL</option>
</select>

使用JavaScript获得选中值

代码语言:javascript
复制
$("#zh_select").change(function(){
    var select  = document.getElementById("zh_select");
    console.log(select.options[select.selectedIndex].value);
})

使用JavaScript改变选中值

代码语言:javascript
复制
$("#zh_select").change(function(){
     var select  = document.getElementById("zh_select");
     select.options[index].selected = true;
     index:option的位置,从0开始。
})
$("#zh_select").find("option:contains('"+HSK+"')").attr("selected",true);
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-05-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • checkbox的使用
    • 设置checkbox为单选
      • 获得checkbox选中的内容
        • jquery取消选中
        • radio的使用
          • 使用JavaScript获得第一组被选中的那个值
            • 使用juqery设置某选项被选中
            • select的使用
              • 使用JavaScript获得选中值
                • 使用JavaScript改变选中值
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档