关于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>
...全文
177 11 打赏 收藏 举报
写回复
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 还是没效果
娃都会打酱油了 2015-05-25
  • 打赏
  • 举报
 回复
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， 把以上获得的值，添加到一个表格中，每项内容作为一列，可添加多行，每行带删除按钮，可做行删除 大神这两个要求怎么写？
娃都会打酱油了 2015-05-25
  • 打赏
  • 举报
 回复 
var checkedobj = $("[name='checkboxid']:checked");
$("[name='rbuttonid']:checked").click(function(){//获取radio对象
wuxian2015 2015-05-25
  • 打赏
  • 举报
 回复
求助啊
相关推荐
华为开发者大赛云计算专场
1.华为企业云API使用讲解 该课程介绍如何通过华为企业云API进行二次开发，并选取一个实战案例。后把遇到问题的求助渠道介绍给大家。
jquery清空img的src_求助，用jq 删除过多的img标签
JH鹰 userAgent ; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var divChild=document.getElementById("...
JQ初级
一,JQ安装使用 当使用JQ时,JQ符号$与其框架或插件符号发生冲突,可以通过JQuery.noConflict()修改JQ符号 JQ的使用方法和JS差不多,不过要想使用JQ语句必须在SCRIPT前面导入JQ文件 <script src="js/jquery-3.3.1.js"></script> console.log(jQuery); console.lo...
JQ基础笔记
JQ笔记，包括JQ基本使用，JQ常用API，JQ事件和JQ其他方法
linux jq 使用
jq 使用1，安装jq 1，安装jq # lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 18.04.3 LTS Release: 18.04 Codename: bionic jq 安装 apt install jq -y 参考： jq 常用操作 ...
发帖
JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2015-05-25 09:06
社区公告
暂无公告