jQuery---操作 radio、checkbox、select（select中options的属性）

最新推荐文章于 2020-01-10 11:41:22 发布

muzidigbig

最新推荐文章于 2020-01-10 11:41:22 发布

阅读量775

点赞数 1

分类专栏： jQuery 文章标签： jq全选/全不选全选获取每个选项的值 select的属性 options

本文链接：https://blog.csdn.net/muzidigbig/article/details/84255931

版权

jQuery 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、jQuery---操作 radio

补充知识：

二、jQuery---操作 checkbox

<body>
    <div class="checkbox">
        <input type="checkbox" name="checkbox_name"  id="handlAll" value="#">全选/全不选 <br>
        <input type="checkbox" name="checkbox_name"  id="handlReverse" value="#">反选 <br>
        <input type="checkbox" name="checkbox_name" class="inp_checkbox" id="checkbox_name" value="muzi">muzi <br>
        <input type="checkbox" name="checkbox_name" class="inp_checkbox" id="" value="digbig">digbig <br>
        <input type="checkbox" name="checkbox_name" class="inp_checkbox" id="" value="muzidigbig">muzidigbig <br>
        <input type="checkbox" name="checkbox_name" class="inp_checkbox" id="" value="lucky">lucky <br>
    </div>
</body>
<script src="./js/jquery-3.3.1.js"></script>
<script>
    /*
    $('.inp_checkbox').click(function(){
        //点击哪个元素获取哪个元素的值
        var _thisVal = $(this).val();
        console.log(_thisVal)
    })
    */

    // 2、设置选中项(:checkbox 匹配所有复选框)
    $("input[name='checkbox_name']:checkbox:eq(3)").attr("checked","checked");

    //  3.设置checkbox的value属性的值:
    $('#checkbox_name').click(function(){
        $(this).attr("value","jiji");
    });

    // 4.全选/全不选
    var checkAll = [];
    $('#handlAll').click(function(){
        if($(this).prop('checked') === true){
            $('.inp_checkbox:checkbox').prop('checked',true);
            $('.inp_checkbox:checkbox').each(function(index,domEle){
                checkAll.push($(domEle).val())
            });
            console.log(checkAll);
        }else{
            $('input[type="checkbox"]').prop('checked',false);
            checkAll.length = 0;
            console.log(checkAll);
        }
    })
    //获取被选中的checkbox的值并添加到数组中，取消选项后从数组中移除：
    $('.inp_checkbox').click(function(){
        if($(this).prop('checked') == true){
            checkAll.push($(this).val());
            console.log(checkAll)
        }else{
            checkAll.splice(checkAll.indexOf($(this).val()),1);
            console.log(checkAll);
        }
    })

    //5.反选(在什么都不选时也可满足全选/全不)
    $('#handlReverse').click(function(){
        if($(this).prop('checked') === true){
            $('.inp_checkbox:checkbox').each(function(index,domEle){
                if($(domEle).prop('checked') == true){
                    $(domEle).prop('checked',false);
                }else{
                    $(domEle).prop('checked',true);
                }
            })
        }else{
            $('.inp_checkbox:checkbox').each(function(index,domEle){
                if($(domEle).prop('checked') == true){
                    $(domEle).prop('checked',false);
                }else{
                    $(domEle).prop('checked',true);
                }
            })
        }
    })

    /*
    // 6.获取被选中的checkbox的值并添加到数组中，取消选项后从数组中移除：
    var selValue = [];
    $('.inp_checkbox').click(function(){
        if($(this).prop('checked') == true){
            selValue.push($(this).val());
            console.log(selValue)
        }else{
            selValue.splice(selValue.indexOf($(this).val()),1);
            console.log(selValue);
        }
    })
    */
    
</script>

三、jQuery---操作 select

<body>
    <select name="" id="sel_name">
        <option value="muzi">muzi</option>
        <option value="digbig">digbig</option>
        <option value="muzidigbig">muzidigbig</option>
    </select>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
    $('#sel_name').change(function(){

    // 1.获取选中项：
        // 获取选中项的Value值：(:selected 匹配所有选中的option元素)
        var selOpt;
        // selOpt = $('select#sel_name option:selected').val();
        // 或者
        // selOpt = $('select#sel_name').find('option:selected').val();
        // 获取选中项的Text值：
        selOpt = $('select#sel_name option:selected').text();
        // 或者
        // selOpt = $('select#sel_name').find('option:selected').text();

    // 2.获取当前选中项的索引值：(selectedIndex 返回被选中的选项的下标。obj.selectedIndex)
        var optIndex = $('select#sel_name').get(0).selectedIndex;
    })
    
    // 3.获取当前option的最大索引值：
        var maxIndex = $('select#sel_name option:last').attr("index");
        console.log(maxIndex)
 
    // 4.获取DropdownList的长度：(get([index]) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。)
        //length 返回 Select 对象下选项的数目。 obj.length // obj.options.length
        var optLength = $('select#sel_name')[0].options.length;
        // 或者
        var optLength = $('select#sel_name').get(0).options.length;
        console.log(optLength);//3

    // 5.设置第一个option为选中值：
        $('select#sel_name option:first').attr('selected','true')
        // 或者
         $('select#sel_name')[0].selectedIndex = 0;
</script>

补充知识：

javascript中select中options的属性

Select 选择区（下拉列表）对象由“<select id="select_id">”指定。 obj =getrElementById('select_id')属性

length 返回 Select 对象下选项的数目。 obj.length // obj.options.length
selectedIndex 返回被选中的选项的下标。obj.selectedIndex
这个下标就是在 options[ ] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
form 返回包含本元素的表单对象。 obj.options[x].form

方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。

事件
onchange

options[ ];
Option 选择项对象 options[ ] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。
Option 对象由“<select>”下的“<options>”指定。

options[ ] 数组的属性：
1.length;
2.selectedIndex 与所属 Select 对象的同名属性相同。

单个 Option 对象的属性
text 返回/指定 Option 对象所显示的文本
value 返回/指定 Option 对象的值，与<options value="...">一致。
index 返回该Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。
selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。
默认选中可以这样写
<option selected="selected" value="" ></option>
<option selected value="" ></option>
defaultSelected 返回该对象默认是否被选中。true / false。

若有不足请多多指教！希望给您带来帮助！

muzidigbig

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery---操作 radio、checkbox、select（select中options的属性）

一、jQuery---操作 radio补充知识：二、jQuery---操作 checkbox&lt;body&gt; &lt;div class="checkbox"&gt; &lt;input type="checkbox" name="checkbox_name" id="handlAll" value="#"&g
复制链接

扫一扫