处理元素绑定及单选框与复选框的脚本

最新推荐文章于 2022-08-18 23:55:29 发布

最新推荐文章于 2022-08-18 23:55:29 发布 · 152 阅读

文章标签：

#元素绑定 #radio #checkbox

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了HTML中元素绑定for属性的应用，以及如何通过脚本控制问卷中单选框和复选框的交互。详细解释了显式和隐式的元素关联方式，并提供了实现单选和复选框动态选择的JavaScript脚本示例。

1:元素绑定for

显式的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>

2：问卷用相应的单选框和复选框，点击文字和元素都能选中。通过脚本控制

//如果单选
            if($ul.is(".single")){
                $ul.children().click(function(){
                    $(":radio",$(this)).attr('checked',true);
                    $(":radio",$(this).siblings()).attr('checked',false);
                });
            }else{//如果是复选框
                $ul.children().click(function(event){
                    var $target = $(event.target);
                    var type = $target.attr("type");
                    //如果不是checkbox直接元素的触发，要明确知道是哪个元素进行的触发

                   //如果是type元素本身，不进行处理
                    if(type == "undefined" || type == undefined ){
                        var $checkbox = $(":checkbox",$(this));
                        var checked = $checkbox.attr('checked');
                        if(checked){
                            $checkbox.attr("checked",false);
                        }else{
                            $checkbox.attr("checked",true);
                        }
                    }
                });
            }

注意：其中的取值

//单选框

var $rchecked =$(":radio:checked",$(this));

//复选框

$(':checkbox:checked',$this).each(function(i){//遍历每一个复选框

}