关于JQ的使用,求助

wuxian2015 2015-05-25 09:06:17
①为什么无法获取到checkbox与radio中的值


②第三、第四个要求怎么写?


1, jQuery获取object对象,如下拉框select对象,单选框radio对象,复选框checkbox对象,文本框text对象;
2, 获取对象值,对于值唯一的元素,如select,radio,text通过get()方法获取value值,对于数据元素,如checkbox通过 each循环获取value值
3, 把以上获得的值,添加到一个p标记中,要求黑体,16号字,每项内容独立一行
4, 把以上获得的值,添加到一个表格中,每项内容作为一列,可添加多行,每行带删除按钮,可做行删除







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script src="jquery-1.11.3.js"></script>

</head>

<body>




<form>
<!-- 获取select的selected值 biuuu.com-->
<select id="selectid"><option value="biuuu_s1">s1</option>
<option value="biuuu_s2">s2</option>
<option value="biuuu_s3">s3</option>
<option value="biuuu_s4">s4</option>
</select>
<input type="button" id="sbuttonid" value="获取selected值" /><span id="sresult"></span><br />
<!-- 获取checkbox的checked值 biuuu.com-->
<input type="checkbox" name="checkboxid" value="biuuu_c1" />c1<input type="checkbox" name="checkboxid" value="biuuu_c2" />c2<input type="checkbox" name="checkboxid" value="biuuu_c3" />c3<input type="checkbox" name="checkboxid" value="biuuu_c4" />c4<input type="button" id="cbuttonid" value="获取checkbox值" /><span id="cresult"></span><br />
<!-- 获取radio的checked值 biuuu.com-->
<input type="radio" name="radioid" value="biuuu_r1" />r1<input type="radio" name="radioid" value="biuuu_r2" />r2<input type="radio" name="radioid" value="biuuu_r3" />r3<input type="button" id="rbuttonid" value="获取radio值" /><span id="rresult"></span><br />
<!-- 获取text的value值 biuuu.com-->
<input type="text" id="textid" value="" /><input type="button" id="tbuttonid" value="获取text值" /><span id="tresult"></span></form>


<script type="text/javascript">


$(document).ready(function(){

$("#sbuttonid").click(function(){//获取select对象
var selectedobj = $("#selectid option:selected");//获取当前selected的值
var selected = selectedobj.get(0).value;$("#sresult").html("结果:"+selected);
});

$("#cbuttonid").click(function(){//获取checkbox对象
var check = '';
var checkedobj = $("checkboxid");//获取当前checked的value值 如果选中多个则循环
//$("[name='checkboxid'][@checked]")
checkedobj.each(function(){var ischeck = this.value;check += ischeck;
});
$("#cresult").html("结果:"+check);
});

$("#rbuttonid").click(function(){//获取radio对象
var radioobj = $("[name='radioid'][@checked]");//获取当前checked的value值
var radio = radioobj.get(0).value;$("#rresult").html("结果:"+radio);
});

$("#tbuttonid").click(function(){//获取text对象
var textobj = $("#textid");//获取当前text的value值
var text = textobj.get(0).value;$("#tresult").html("结果:"+text);
});
});

</script>








</body>
</html>

...全文
185 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
wuxian2015 2015-06-02
  • 打赏
  • 举报
回复
把以上获得的值,添加到一个表格中,每项内容作为一列,可添加多行,每行带删除按钮,可做行删除
wuxian2015 2015-06-02
  • 打赏
  • 举报
回复
表格功能怎么写好点
wudichaoren2010 2015-05-28
  • 打赏
  • 举报
回复
改好了
wudichaoren2010 2015-05-28
  • 打赏
  • 举报
回复


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LJ</title>

<script src="jquery-1.6.1.min.js"></script>

</head>

<body>




<form>  
<!-- 获取select的selected值 -->  
<select id="selectid"><option value="s1">s1</option>  
<option value="s2">s2</option>  
<option value="s3">s3</option>  
<option value="s4">s4</option>  
</select>  
<input type="button" id="sbuttonid" value="获取selected值" /><span id="sresult"></span><br />  
<!-- 获取checkbox的checked值 -->  
<input type="checkbox" name="checkboxid" value="c1" />c1<input type="checkbox" name="checkboxid" value="c2" />c2<input type="checkbox" name="checkboxid" value="c3" />c3<input type="checkbox" name="checkboxid" value="c4" />c4<input type="button" id="cbuttonid" value="获取checkbox值" /><span id="cresult"></span><br />  







<!-- 获取radio的checked值 -->  



<input type="radio" name="radioid" value="r1" />r1<input type="radio" name="radioid" value="r2" />r2<input type="radio" name="radioid" value="r3" />r3<input type="button" id="rbuttonid" value="获取radio值" /><span id="rresult"></span><br />  






<!-- 获取text的value值 -->  
<input type="text" id="LJtextid" value="" /><input type="button" id="tbuttonid" value="获取text值" /><span id="tresult"></span></form> 


<script type="text/javascript">


$(document).ready


(

	function()
	{  
	  
		$("#sbuttonid").click
		(
			function()
			{//获取select对象  
				var selectedobj = $("#selectid option:selected");//获取当前selected的值  
				var selected = selectedobj.get(0).value;$("#sresult").html("结果:"+selected);  
			}
		);  
  
	$("#cbuttonid").click(function(){//获取checkbox对象  
var check = ''; 
 var checkedobj = $("[name='checkboxid']:checked");
//var checkedobj = $("checkboxid");
//获取当前checked的value值 如果选中多个则循环 
//$("[name='checkboxid'][@checked]")
checkedobj.each(function(){var ischeck = this.value;check += ischeck;  
});  
$("#cresult").html("结果:"+check);  
}); 




 



$("#rbuttonid").click(
function(){//获取radio对象 
//$("#rbuttonid").click(function(){
    //获取radio对象  
    //var radioobj = $("[name='rbuttonid']:checked");
var radioobj = $("[name='radioid']:checked");
//获取当前checked的value值  
var radio = radioobj.get(0).value;$("#rresult").html("结果:"+radio);  
});  


  
$("#tbuttonid").click
(
	function()
	{//获取text对象  
		var textobj = $("#LJtextid");//获取当前text的value值  
		var text = textobj.get(0).value;$("#tresult").html("结果:"+text);  
	}
);  

		$("#adp").click
		(
			function()
			{
				 var selectedobj = $("#selectid option:selected");//获取当前selected的值
				 var check = ''; 
 var checkedobj = $("[name='checkboxid']:checked");
//var checkedobj = $("checkboxid");
//获取当前checked的value值 如果选中多个则循环 
//$("[name='checkboxid'][@checked]")
checkedobj.each(function(){var ischeck = this.value;check += ischeck;}); 
var radioobj = $("[name='radioid']:checked");
//获取当前checked的value值  
var radio = radioobj.get(0).value;
var textobj = $("#LJtextid");//获取当前text的value值  
		var text = textobj.get(0).value;
				str=selectedobj.get(0).value+"<br />"+check+"<br />"+radio+"<br />"+text;
				$('p').append(str+'<br/>');
			}
		);
		
		
		$("#AddTable").click
(
	function()
	{
		
		 var check = ''; 
 var checkedobj = $("[name='checkboxid']:checked");
//var checkedobj = $("checkboxid");
//获取当前checked的value值 如果选中多个则循环 
//$("[name='checkboxid'][@checked]")
checkedobj.each(function(){var ischeck = this.value;check += ischeck;}); 
var radioobj = $("[name='radioid']:checked");
//获取当前checked的value值  
var radio = radioobj.get(0).value;
var textobj = $("#LJtextid");//获取当前text的value值  
		var text = textobj.get(0).value;
		
		
		 var selectedobj = $("#selectid option:selected");
		var str1=selectedobj.get(0).value;
		var str2=check;
		var str3=radio;
		var str4=text;
		$('table tbody').append('<tr><td>'+str1+'</td></tr>'  + '<tr><td>'+str2+'</td></tr>' +'<tr><td>'+str3+'</td></tr>' + '<tr><td>'+str4+'</td></tr>')
	}
);  


	}
);

</script>

<p style="font-size:16px; font-family:'黑体'"></p>

<input type="button" id="adp" value="加上P标签" />

<table width="200" border="1">
<tbody>
</tbody>
</table>
<input type="button" id="AddTable" value="加上表格" />



</body>
</html>


wuxian2015 2015-05-28
  • 打赏
  • 举报
回复
单选按钮radio无效
wuxian2015 2015-05-25
  • 打赏
  • 举报
回复


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LJ</title>

<script src="jquery-1.11.3.js"></script>

</head>

<body>




<form>  
<!-- 获取select的selected值 -->  
<select id="selectid"><option value="s1">s1</option>  
<option value="s2">s2</option>  
<option value="s3">s3</option>  
<option value="s4">s4</option>  
</select>  
<input type="button" id="sbuttonid" value="获取selected值" /><span id="sresult"></span><br />  
<!-- 获取checkbox的checked值 -->  
<input type="checkbox" name="checkboxid" value="c1" />c1<input type="checkbox" name="checkboxid" value="c2" />c2<input type="checkbox" name="checkboxid" value="c3" />c3<input type="checkbox" name="checkboxid" value="c4" />c4<input type="button" id="cbuttonid" value="获取checkbox值" /><span id="cresult"></span><br />  
<!-- 获取radio的checked值 -->  
<input type="radio" name="radioid" value="biuuu_r1" />r1<input type="radio" name="radioid" value="biuuu_r2" />r2<input type="radio" name="radioid" value="biuuu_r3" />r3<input type="button" id="rbuttonid" value="获取radio值" /><span id="rresult"></span><br />  
<!-- 获取text的value值 -->  
<input type="text" id="LJtextid" value="" /><input type="button" id="tbuttonid" value="获取text值" /><span id="tresult"></span></form> 


<script type="text/javascript">


$(document).ready


(

	function()
	{  
	  
$("#sbuttonid").click(function(){//获取select对象  
var selectedobj = $("#selectid option:selected");//获取当前selected的值  
var selected = selectedobj.get(0).value;$("#sresult").html("结果:"+selected);  
});  
  
$("#cbuttonid").click(function(){//获取checkbox对象  
var check = ''; 
 var checkedobj = $("[name='checkboxid']:checked");
//var checkedobj = $("checkboxid");
//获取当前checked的value值 如果选中多个则循环 
//$("[name='checkboxid'][@checked]")
checkedobj.each(function(){var ischeck = this.value;check += ischeck;  
});  
$("#cresult").html("结果:"+check);  
});  
 $("[name='rbuttonid']:checked").click(function(){//获取radio对象 
//$("#rbuttonid").click(function(){
	//获取radio对象  
	//var radioobj = $("[name='rbuttonid']:checked");
var radioobj = $("[name='radioid'][@checked]");
//获取当前checked的value值  
var radio = radioobj.get(0).value;$("#rresult").html("结果:"+radio);  
});  
  
$("#tbuttonid").click
(
	function()
	{//获取text对象  
		var textobj = $("#LJtextid");//获取当前text的value值  
		var text = textobj.get(0).value;$("#tresult").html("结果:"+text);  
	}
);  

		$("#adp").click
		(
			function()
			{
				 var selectedobj = $("#selectid option:selected");//获取当前selected的值
				str=selectedobj.get(0).value;
				$('p').append(str+'<br/>')
			}
		);
		
		
		$("#AddTable").click
(
	function()
	{
		 var selectedobj = $("#selectid option:selected");
		str=selectedobj.get(0).value;
		$('table tbody').append('<tr><td>'+str+'</td></tr>')
	}
);  


	}
);

</script>

<p></p>

<input type="button" id="adp" value="加上P标签" />

<table>
<tbody>
</tbody>
</table>
<input type="button" id="AddTable" value="加上表格" />



</body>
</html>

单选按钮radio无效
wuxian2015 2015-05-25
  • 打赏
  • 举报
回复


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script src="jquery-1.11.3.js"></script>

</head>

<body>




<form>  
<!-- 获取select的selected值 biuuu.com-->  
<select id="selectid"><option value="s1">s1</option>  
<option value="s2">s2</option>  
<option value="s3">s3</option>  
<option value="s4">s4</option>  
</select>  
<input type="button" id="sbuttonid" value="获取selected值" /><span id="sresult"></span><br />  
<!-- 获取checkbox的checked值 -->  
<input type="checkbox" name="checkboxid" value="c1" />c1<input type="checkbox" name="checkboxid" value="c2" />c2<input type="checkbox" name="checkboxid" value="c3" />c3<input type="checkbox" name="checkboxid" value="c4" />c4<input type="button" id="cbuttonid" value="获取checkbox值" /><span id="cresult"></span><br />  
<!-- 获取radio的checked值 biuuu.com-->  
<input type="radio" name="radioid" value="biuuu_r1" />r1<input type="radio" name="radioid" value="biuuu_r2" />r2<input type="radio" name="radioid" value="biuuu_r3" />r3<input type="button" id="rbuttonid" value="获取radio值" /><span id="rresult"></span><br />  
<!-- 获取text的value值 biuuu.com-->  
<input type="text" id="textid" value="" /><input type="button" id="tbuttonid" value="获取text值" /><span id="tresult"></span></form> 


<script type="text/javascript">


$(document).ready(function(){  
  
$("#sbuttonid").click(function(){//获取select对象  
var selectedobj = $("#selectid option:selected");//获取当前selected的值  
var selected = selectedobj.get(0).value;$("#sresult").html("结果:"+selected);  
});  
  
$("#cbuttonid").click(function(){//获取checkbox对象  
var check = ''; 
 var checkedobj = $("[name='checkboxid']:checked");
//var checkedobj = $("checkboxid");
//获取当前checked的value值 如果选中多个则循环 
//$("[name='checkboxid'][@checked]")
checkedobj.each(function(){var ischeck = this.value;check += ischeck;  
});  
$("#cresult").html("结果:"+check);  
});  
 $("[name='rbuttonid']:checked").click(function(){//获取radio对象 
//$("#rbuttonid").click(function(){
	//获取radio对象  
	//var radioobj = $("[name='rbuttonid']:checked");
var radioobj = $("[name='radioid'][@checked]");
//获取当前checked的value值  
var radio = radioobj.get(0).value;$("#rresult").html("结果:"+radio);  
});  
  
$("#tbuttonid").click(function(){//获取text对象  
var textobj = $("#textid");//获取当前text的value值  
var text = textobj.get(0).value;$("#tresult").html("结果:"+text);  
});  
});

</script>








</body>
</html>

单选radio 还是没效果
  • 打赏
  • 举报
回复
3就是$('p').append(str+'<br/>') 4就是$('table tbody').append('<tr><td>'+str+'</td></tr>')
wuxian2015 2015-05-25
  • 打赏
  • 举报
回复
引用 2 楼 starfd 的回复:
var checkedobj = $("[name='checkboxid']:checked");
$("[name='rbuttonid']:checked").click(function(){//获取radio对象
3, 把以上获得的值,添加到一个p标记中,要求黑体,16号字,每项内容独立一行 4, 把以上获得的值,添加到一个表格中,每项内容作为一列,可添加多行,每行带删除按钮,可做行删除 大神这两个要求怎么写?
  • 打赏
  • 举报
回复
var checkedobj = $("[name='checkboxid']:checked");
$("[name='rbuttonid']:checked").click(function(){//获取radio对象
wuxian2015 2015-05-25
  • 打赏
  • 举报
回复
求助啊

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧