[英]Display Selected Check-box data using jquery
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>
Do this to get the names 这样做以获得名称
Changes add checkbox function to ( otherwise you won't have any values ): 更改添加复选框功能为( 否则您将没有任何值 ):
newTextBoxDiv.after().html('<input type="checkbox" value="' + cars[i] + '" />'+cars[i]+'</br>');
Update your if else: 更新您的if if else:
var isChecked = $('[type=checkbox]:checked');
var names = "";
isChecked.each(function(){
names += $(this).val();
});
alert(names);
Live fiddle: http://jsfiddle.net/nyu5T/ 现场小提琴: http : //jsfiddle.net/nyu5T/
看一下jQuery的serialize()
console.log($(":checked").serialize());
I know you have an answer but this addresses several issues: fiddle showing it working: http://jsfiddle.net/WGKuX/ 我知道您有一个答案,但这可以解决几个问题:提琴显示它的工作原理 : http : //jsfiddle.net/WGKuX/
Markup: fix bad html for </br>
and remove onclick from markup (in code later) 标记:为
</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" />
now for some code: comments on each portion 现在获取一些代码:每个部分的注释
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.