zoukankan      html  css  js  c++  java
  • jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr(checked)无效的解决

    关于页面前面标签

    <ul>
                                @{
                        foreach (var item in vote)
                        {
                            if (!string.IsNullOrEmpty(item.Img))
                            {
                                <li class="vop">
                                    @if (!string.IsNullOrEmpty(item.VoteText))
                                    {
                                        <a href="votedetail?cid=@classid&no=@item.Id">
                                            <img src="@item.Img" />
                                        </a>
                                    }
                                    else
                                    {
                                        <img src="@item.Img" />
                                    }
                                    <div class="votesubject">
                                        <input id="@item.Id" name="votetitle" value="@item.VoteNum" type="@_votetype" />
                                        @if (!string.IsNullOrEmpty(item.VoteText))
                                        {
                                            <a href="votedetail?cid=@classid&no=@item.Id">
                                                <span>@item.Title</span>
                                            </a>
                                        }
                                        else
                                        {
                                            <span>@item.Title</span>
                                        }
                                    </div>
    
                                </li>
                            }
                            else
                            {
                                <li class="vopn">
                                    <input id="@item.Id" name="votetitle" value="@item.VoteNum" type="@_votetype" />
                                    @if (!string.IsNullOrEmpty(item.VoteText))
                                    {
                                        <a href="votedetail?cid=@classid&no=@item.Id">
                                            <span class="vvpt">@item.Title</span>
                                        </a>
                                    }
                                    else
                                    {
                                        <span class="vvpt">@item.Title</span>
                                    }
                                </li>
    
                            }
                        }
                                }
                            </ul>

    js可这样判断是否选中

    $(".votesubject").find("input").each(function () {
    if ($(this).prop('checked', true)) {
    alert($(this).prop("value"))
    }
    });

    也可这样

    $("input[name=votetitle]").each(function () {
    //if (this.checked) {
    // alert($(this).val());
    //}
    var radios = $(this);
    for (i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
    votenum = parseInt(radios[i].value)+1;
    votes += votenum + "@";
    ids+=$(this).attr("id")+"@"
    ischeck = false;
    }
    }
    });

    我需要的功能js方法:

    $(window).ready(function () {
          $("#tj").click(function () {
            //$(".votesubject").find("input").each(function () {
            //    if ($(this).prop('checked', true)) {
            //        alert($(this).prop("value"))
            //    }
            //  });
            var ids = "";
            var votes = "";
            var votenum;
            var ischeck = true;
            $("input[name=votetitle]").each(function () {
                //if (this.checked) {
                //    alert($(this).val());
                //}          
                var radios = $(this);          
                for (i = 0; i < radios.length; i++) {
                    if (radios[i].checked) {                  
                        votenum = parseInt(radios[i].value)+1;                  
                        votes += votenum + "@";                  
                        ids+=$(this).attr("id")+"@"
                        ischeck = false;
                    }
                }
            });
            if (ischeck) {
                alert("请勾选选项后再进行提交");
                return false;
            }
            if (!ischeck) {
                if (ids.length > 1) {
                    ids = ids.substring(0, ids.length - 1);
                }
                if (votes.length > 1) {
                    votes = votes.substring(0, votes.length - 1);
                }          
                $("#votenum").val(votes);
                $("#ids").val(ids);
                alert("感谢您的参与。");
                $("#form1").submit();
            }
        });
        $("#ck").click(function () {
            window.location = "voteview?cid= " + $("#classid").val() + "&id=" + $("#vid").val() + " ";
        });
    });

    附上相关选中的写法

     $("[name='checkbox']").attr("checked",true);//全选

     $("[name='checkbox']").removeAttr("checked");//取消全选

    $('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法

     JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性

    jQuery RemoveAttr(checked)之后再Attr(checked)属性无效果

    当我们升级JQ1.6到更高的版本时,attr(‘checked‘); 返回的是checked或者是undefined,不是原来的true和false了,将attr属性改用prop可解决

    1. $("#cb").attr("tagName"); //undefined   
    2. $("#cb").prop("tagName"); //INPUT   

    全选与反选及批量删除

      //全选和反选
        $("#CheckAll").click(function () {
            var flag = $("#CheckAll").is(":checked"); //判断全选按钮的状态 
            $("input[name=checkitem]").prop("checked", flag);
        });
    
        //删除多条信息
        function DeleteList() {
            var array = new Array();
            $.each($("input[name=checkitem]:checked"), function (index, content) {
                var iindex = $("input[name=checkitem]:checked")[index].value;
                array.push(iindex);
    
            });
            if (array.length < 1) {
                alert("请选择要删除的项!");
                return false;
            } else {
                var delIds = array.join(",");
                if (confirm("你确定删除吗?")) {
                    $.ajax({
                        url: '@Url.Action("DelSortProduct", "SortProduct")',
                        type: 'post',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: "{ "ids":"" + delIds + ""}", 
                        success: function(result) {
                            if (result.DoFlag) {
                                alert(result.DoResult);
                                location.reload();
                            } else {
                                alert(result.DoResult);
                            }
    
                        },
                        error: function(data) {
                            alert(data.responseText);
                        }
                    });
                }
            }
        }
    
        $(".setIsDel").click(function () { 
            var id = $(this).prop("id"); 
            if (confirm('确定删除?')) {
                $.ajax({
                    url: '@Url.Action("DelSortProduct", "SortProduct")',
                    data: { "ids": id },
                    //data: "{ "ids":"" + id + ""}",
                    success: function(res) {
                        if (res.DoFlag) {
                            alert(res.DoResult);
                            location.reload();
                        } else {
                            alert(res.DoResult);
                        }
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });
            } 
        });
    View Code

    Jquery操作select选项集合!

    http://www.cnblogs.com/pepcod/archive/2012/07/03/JavaScript.html

    js和Jquery获取选中select值和文本

    http://www.cnblogs.com/shenyixin/archive/2012/12/11/2813221.html

  • 相关阅读:
    Java Lambda表达式初探
    解开lambda最强作用的神秘面纱
    常用正则表达式
    js,java时间处理
    Java 8新特性探究(二)深入解析默认方法
    Java 8里面lambda的最佳实践
    lambda表达式和闭包
    Lambda语法篇
    lambda表达式
    依赖注入和控制反转的理解
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/4482845.html
Copyright © 2011-2022 走看看