checkbox 和 radio 和 select 的使用

Carson 发布于2019-08-01 16:53 / 2923人阅读

摘要：的使用徐州徐州无锡无锡苏州苏州中国中国俄罗斯俄罗斯设置为单选部分这样凡是设置属性为的将变成单选，为的是多选。

checkbox的使用

</>复制代码 
徐州

无锡

苏州

中国

俄罗斯

设置checkbox为单选

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部分

</>复制代码 
  $(function(){
        var city = "";
        $("input:checkbox[name=city ]:checked").each(function(){
            city += ($(this).val());
        });
  })

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

jquery取消选中

</>复制代码 
    var code_Values = $("input:checkbox[name=abcd ]:checked");
    if(code_Values.length){
        for(var i=0;i
radio的使用
下面是两组radio：
</>复制代码 
男
女
是
否
使用JavaScript获得第一组被选中的那个值
</>复制代码 
    var radio = document.getElementsByName("sex_radio")
    for(var i =0 ; i
使用juqery设置某选项被选中
</>复制代码 
    $("#man").attr("checked","checked")
checked="checked"属性是默认选中状态;
name属性相同为一组；
value是js获得的值；
select的使用
</>复制代码 
使用JavaScript获得选中值
</>复制代码 
$("#zh_select").change(function(){
    var select  = document.getElementById("zh_select");
    console.log(select.options[select.selectedIndex].value);
})
使用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);

云服务器 GPU云服务器服务器的使用和维护机智云服务器的设计和使用公司云服务器的使用和部署 docker安装和使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50807.html

修改radio、checkbox和select默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然已经不能满足需求。兼容更低版本浏览器的样式修改最后附上演示链接修改和默认样式现在前端页面效果日益丰富，默认的input组件样式显然已经不能满足需求。趁着这次开发的页面中有这方面的需求，在这里整理一下修改radio、checkbox、select的方法。 radio and checkbox 修改radio的默认样式有两种常用的方法纯CSS...

mumumu 2019-08-21 10:50 评论0 收藏0
js原生操作select、radio 、checkbox

摘要：常见操作常见操作常见操作常见操作代码下拉框单选框多选框代码常见操作常见操作获取选中值第一种通过对象获取第二种通过选中的下标来获取获取获取选中文本值通过选中的下标来获取选中文本值设置选中项知道的值或者下标或者文本值下面代码只列出根据来选中获取 select、radio 、checkbox常见操作 select常见操作 radio常见操作 select常见操作 html代码 ...

CoorChice 2019-08-01 17:18 评论0 收藏0
js原生操作select、radio 、checkbox

摘要：常见操作常见操作常见操作常见操作代码下拉框单选框多选框代码常见操作常见操作获取选中值第一种通过对象获取第二种通过选中的下标来获取获取获取选中文本值通过选中的下标来获取选中文本值设置选中项知道的值或者下标或者文本值下面代码只列出根据来选中获取 select、radio 、checkbox常见操作 select常见操作 radio常见操作 select常见操作 html代码 ...

HitenDev 2019-08-20 18:29 评论0 收藏0
checkbox 和 radio 和 select 的使用

摘要：的使用徐州徐州无锡无锡苏州苏州中国中国俄罗斯俄罗斯设置为单选部分这样凡是设置属性为的将变成单选，为的是多选。 checkbox的使用徐州无锡苏州中国俄罗斯设置checkbox为单选 javascript部分 $(function(){ $(:checkbox[name=Country]).click(function(){ i...

wanglu1209 2019-08-20 16:49 评论0 收藏0