使用jQuery显示选定的复选框数据

Question

Here i want to display selected check-box text. Help me how to do this   

 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery_1.9.0.js"></script>
      <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
       <script>
       var counter = 1;
       var cars = new Array("Paul","Catherine","Steve","Paul","Catherine","Steve","Paul","Catherine","Steve","Paul","Catherine","Steve");

        $(document).ready( function() {
            $("#checkall").click(function() {
                if ($(this).is(':checked')){
                    $(":checkbox").attr("checked", true);
                  }
                  else{

                    $(":checkbox").attr("checked", false);
                  }
            }); 

            // Uncheck All

            for (var i=0;i<cars.length;i++){
            var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);
             newTextBoxDiv.after().html('<input type="checkbox" />'+cars[i]+'</br>');
            newTextBoxDiv.appendTo("#TextBoxesGroup");
            }
        });

        function checkState(){

        var isChecked = $('#checkall').is(':checked');

        if(isChecked){

        // here i  want to display all check-boxes data

        } else{

        // here i  want to display Selected Check-boxes data

        }


        }

    </script>

    </head>
    <body>






    </br>


        <div id="TextBoxesGroup">
                                        <div id="TextBoxDiv1">
                                        <input type="checkbox" id="checkall" value="check" />select</br>
                                            <br />
                                        </div>
                                    </div>
    <input type = "button" onClick = "checkState()" value = "GetName" id = "button" />  
    </body>
    </html>

Answer 1

这样做以获得名称

更改添加复选框功能为（ 否则您将没有任何值 ）：

newTextBoxDiv.after().html('<input type="checkbox" value="' + cars[i] + '" />'+cars[i]+'</br>');

更新您的if if else：

       var isChecked = $('[type=checkbox]:checked');
       var names = "";
         isChecked.each(function(){
             names += $(this).val();
         });
       alert(names);

现场小提琴： http ： //jsfiddle.net/nyu5T/

Answer 2

看一下jQuery的serialize（）

console.log($(":checked").serialize());

Answer 3

我知道您有一个答案，但这可以解决几个问题：提琴显示它的工作原理： http : //jsfiddle.net/WGKuX/

标记：为</br>修复错误的html并从标记中删除onclick（稍后在代码中）

<br />
<div id="TextBoxesGroup">
    <div id="TextBoxDiv1">
        <input type="checkbox" id="checkall" value="check" />select
        <br />
    </div>
</div>
<input type="button" value="GetName" id="button" />

现在获取一些代码：每个部分的注释

var counter = 1;
var cars = ["Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve"]; //change to simpler declaration

$(document).ready(function () {
    $("#checkall").click(function () {
        $(".myCars").prop("checked", $(this).is(':checked'));
    }); // simplify
    $("#TextBoxesGroup").on("change", ".myCars", function () {
        $("#checkall:checkbox").prop("checked", ($(".myCars").length == $(".myCars:checked").length));
    }); // assume "select" means "select all", if all are checked, check the select otherwise uncheck
    var mylist = "";
    var i = 0;
    for (i = 0; i < cars.length; i++) {
        mylist += "<div id='TextBoxDiv" + (counter + i) + "'><input class='myCars' type='checkbox' value='" + cars[i] + "' />" + cars[i] + '<br /></div>';

    }// note the class added to the checkboxes
    $(mylist).appendTo("#TextBoxesGroup"); // simplify the insertion, only hit DOM once
});

$('#button').click(checkState); //event handler moved from markup

function checkState() {
    var names = "";
    // build list based on the seleck all check state
    var checkslist = $('#checkall').prop('checked') ? $('.myCars[type=checkbox]') : $('.myCars[type=checkbox]:checked');
    checkslist.each(function () {
        names += $(this).val();
    });
    alert(names);
}

使用jQuery显示选定的复选框数据

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-02-12 13:44:27

解决方案2
0 2013-02-12 13:42:49

解决方案3
0 2013-02-12 14:48:53

使用jQuery显示选定的复选框数据

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-02-12 13:44:27

解决方案2 0 2013-02-12 13:42:49

解决方案3 0 2013-02-12 14:48:53

解决方案1
1 已采纳 2013-02-12 13:44:27

解决方案2
0 2013-02-12 13:42:49

解决方案3
0 2013-02-12 14:48:53