PHP与表单数据交换小技巧

在后端和前端数据交互时，经常会和表单打交道，下面将工作中用到的一些表单小技巧一一总结：

checkbox

		<!-- ================= css ================ -->

		<!-- 设置选中 -->
		<input type="checkbox" checked="checked">

		<!-- ================= php ================ -->

		<!-- php设置选中-单个 -->
		<input type="checkbox" <?php if($isSelected) {echo 'checked="checked"';}?>>

		<!-- PHP设置选中-多个 -->
		<script>
			<?php if(isset($checkboxs)): ?>
				// 赋值
				var checkboxs = <?php echo json_encode($checkboxs); ?>;
				// 选中
				for(var v in checkboxs)
				{  
					$(":checkbox[value="+checkboxs[v].id+"]").attr('checked','checked');  
				} 
			<?php endif; ?>
		</script>

		<!-- ================= js ================ -->

		<!-- 获取表单值 -->
		<script>
			// 单个
			var val = document.getElementById('checkboxName').value;
			// 多个
			var vals;
			var checkboxs = document.getElementsByTagName("input");

			for(var v in checkboxs)
			{
				if(checkboxs[v].type == 'checkbox')
				{
					vals.push(checkboxs[v].value);
				}
			}
		</script>

		<!-- 设置表单值 -->
		<script>
			var checkbox = document.getElementById('checkboxName');
			checkbox.value = 'xxx';
		</script>

		<!-- 设置选中 -->
		<script>
			var checkbox = document.getElementById('checkboxName');
			checkbox.checked = true;
		</script>

		<!-- ================= jquery ================ -->

		<!-- 判断是否被选中 -->
		<script>
			$("#checkboxName").is(":checked") //返回值为bool型 
		</script>

		<!-- 获取表单值 -->
		<script>
			var val = $("#checkboxName").val();
		</script>

		<!-- 设置表单值 -->
		<script>
			$("#checkboxName").val('xxx');
		</script>

		<!-- 设置选中 -->
		<script>
			$("#checkboxName").attr('checked','checked');
		</script>

		<!-- 全选 -->
		<script>
			$('#selectAll').click(function(){
				$('#checkboxChildrens').prop('checked',this.checked);
			});
		</script>

radio

		<!-- ================= css ================ -->

		<!-- 设置选中 -->
		<label for="radio1">1</label>
		<input type="radio" id="radio1" name="radioName" checked="checked" value="1">
		<label for="radio2">2</label>
		<input type="radio" id="radio2" name="radioName" value="2">

		<!-- ================= php ================ -->

		<!-- 设置radio值 -->
		<script>

			<?php if($radioVal): ?>
				setRadio(<?php echo $radioVal; ?>);
			<?php endif; ?>

			function setRadio(val)
			{
				// 如果有需求,可以将单选按钮名称作为参数传入
				robj=document.all.radioName;

				for(i=0;i<robj.length;i++)
				{    
					if(robj[i].value==val)
					{    
						robj[i].checked=true;    
					}    
				}    
		    } 
		</script>

		<!-- ================= js ================ -->

		<!-- 获取radio值 -->
		<script>
			function getradio()
			{    
		      robj=document.all.radioName;
		      var val = ''; 

		      for(i=0;i<robj.length;i++)
		      {    
		        if(robj[i].checked)
		        {    
		            val = robj[i].value;
		        }    
		      }

		      return val;   
		    }  
		</script>

		<!-- ================= jquery ================ -->

		<!-- 设置radio值 -->
		<script>
            $("input[name='radioName']").each(function(){
            	if($(this).val() =="xxx")
                {
                    $(this).attr("checked","checked");
                }
            });
		</script>

		<!-- 获取radio值 -->
		<script>
			$('input[name="checkedName"]:checked').val();

			$('input:radio:checked').val();
		</script>

select

<!-- ================= css ================ -->
		<!-- 设置选中  -->
		<select>
			<option value="">option1</option>
			<option value="" selected="selected">option2</option>
			<option value="">option3</option>
		</select>

		<!-- ================= php ================ -->
		<!-- 设置select值 -->
		<script>
			<?php if($selectVal): ?>
				$('#selectName').val(<?php echo $selectVal; ?>);
			<?php endif; ?>
		</script>

		<!-- ================= jquery ================ -->
		<!-- 设置select值 -->
		<script>
			$('#selectName').val('xxxx');
		</script>

		<!-- 获取select值 -->
		<script>
			$('#selectName').val();
		</script>

form

<!-- 提交表单 -->
<script>
	document.getElementById('login_form').submit();
</script>

<!-- ajax提交表单 -->
	<script>
		$.ajax({
	            type: "POST",  
	            url:ajaxCallUrl,  
	            data:$('#formId').serialize(), // formid  
	            error: function(request) {  
	                alert("Connection error");  
	            },  
	            success: function(data) {  
	                alert("success");  
	            }  
		  });  
	</script>