checkbox 和 radio 和 select 的使用

checkbox的使用

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

  $(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<code_Values.length;i++)
        {
            code_Values[i].checked = false;
        }
    }else{
        code_Values.checked = false;
    }

radio的使用

下面是两组radio:

<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获得第一组被选中的那个值

    var radio = document.getElementsByName("sex_radio")
    for(var i =0 ; i<radio.length;i++){
        if(radio[i].checked){
            console.log(radio[i].value)
        }
    }

使用juqery设置某选项被选中

    $("#man").attr("checked","checked")

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

select的使用

<select id="zh_select" >
    <option value="HSK">HSK</option>
    <option VALUE="TOCFL">TOCFL</option>
</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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Sorrower的专栏

界面无小事(五):自定义TextView

1123
来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

3247
来自专栏程序员的知识天地

H5 学习从0到1-H5表格(7)

1021
来自专栏ShaoYL

iOS---设置控件的内容模式

35612
来自专栏河湾欢儿的专栏

手机浏览器的八个容易忽略的兼容问题

3273
来自专栏闻道于事

CSS样式表

CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。 元素的大小: #div1{ width:30...

4298
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3726
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上开发仪表盘控件

设置仪表盘轴线段,打开集合编辑器,并点击"添加",Color属性(仪表盘轴线段的颜色)和SplitNumRate属性(仪表盘轴线段占总线段的比例,取值0-1),...

1083
来自专栏Android干货

小程序实践(六):view内部组件排版

     ①、当水平排列的时候  , justify-content:center ; 决定水平居中

1132
来自专栏企鹅号快讯

前端学习自学笔记:day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第九天的笔记:HTML AND CSS: -复...

1816

扫码关注云+社区

领取腾讯云代金券