JavaScript -02 单选，全选；动态赋值下拉框

V_zcm

已于 2022-05-20 15:18:37 修改

阅读量1k

点赞数 1

分类专栏： javaScript 文章标签： javascript 前端 css

于 2022-02-18 22:10:39 首次发布

本文链接：https://blog.csdn.net/m0_59214979/article/details/123008864

版权

javaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本节：原生JS的单选，全选，动态赋值下拉框。

产品信息组件：

//表单组件
//新增
Vue.component('vue-input', {
  props: ['item'],
  template: '<td align="center" >'+
			  	'<table width="304" height="337">'+
					'<tr>'+
						'<td align="center"><a :onclick="\'showdetail(\'+item.id+\')\'" style="cursor:pointer;"><img  class="productImg" :src="item.photo1" width="300" height="300" border="0"/></a></td>'+
					'</tr>'+
					'<tr  >'+
						'<td align="center" ><input type="checkbox"  class="oneCheck"  name="checkbox" :value="item.zdy9" onclick="changeone(this)" />{{item.zdy9}}({{item.stock}})</td>'+
					'</tr>'+
				  	'</br>'+
				'</table>'+
			'</td>'
})

单选：

	function changeone(obj){
	     if(obj.checked){//checked是被选中的意思
             //赋值被选中CheckBox的长度
  			 var checkedLen  =   $("input[type='checkbox[name='checkbox']:checked").length;
  		 	 $("#buycartotal").html(checkedLen);
  			
  		 	 console.log(buycarProduct2);
		}
		else if(obj.checked == false){
  		 var checkedLen  =   $("input[type='checkbox'][name='checkbox']:checked").length;
  		 	 $("#buycartotal").html(checkedLen);
		}
	}

全选：

   	function selectAll(){
		$("#checkbox_all_1").each( function() {
			if($(this).prop("checked")==true) {
				$("input[type='checkbox']").prop('checked', true);
  		 		var checkedLen  =   $("input[type='checkbox'][name='checkbox']:checked").length;//获取checkbox框的长度
  		 	 	$("#buycartotal").html(checkedLen);
				return;
			} else {
				$("input[type='checkbox']").prop('checked', false);
				 var checkedLen  =   $("input[type='checkbox'][name='checkbox']:checked").length;
  		     	 $("#buycartotal").html(checkedLen);
				return;
			}
		});

	}

动态赋值下拉框：获取下拉框里面的值，这里得注意看，控制台返回的数据，有几个数组，是第几层

$("#pageall").html(res.pageinfo.pageall);
			  	     var pageNumber = Math.ceil(res.pageinfo.total/30);//Math.ceil()向上取整
			  	     if(pageNumber > 0){
			  	     	var inner1;
			  			inner1 += "<option value='saomiaoqiang_main.html?page=1&idtype=all&typeid=null&orderby=createdate&order=desc' selected>1&nbsp;&nbsp;</option>" 
			  			$("#jumpto").html(inner1);
			  			$(".jumpto").html(inner1);
				  			for(var i=1;i<=pageNumber;i++){
				  					var inner2;
					  				inner2 += "<option value='saomiaoqiang_main.html?page="+i+"&idtype=all&typeid=null&orderby=createdate&order=desc'>"+ i +"&nbsp;&nbsp;</option>" 
					  			}
					  			$("#jumpto").html(inner2);
					  			$(".jumpto").html(inner2);
				  		}

 if(pageNumber > 0){
			  	     	var inner1;
			  			inner1 += "<option value='productpublish-main.html?page=1&idtype=all&typeid=null&orderby=createdate&order=desc'>1&nbsp;&nbsp;</option>" 
			  			$("#jumpto").html(inner1);
			  			$(".jumpto").html(inner1);
				  			for(var i=1;i<=pageNumber;i++){
			  					var inner2;
			  					//if(){}
				  				inner2 += "<option value='productpublish-main.html?page="+i+"&idtype=all&typeid=null&orderby=createdate&order=desc'>"+ i +"&nbsp;&nbsp;</option>" 
				  			}
				  			$("#jumpto").html(inner2);
				  			$(".jumpto").html(inner2);
					  			
				  		}

//Div的id名要和最后赋值的id名一致。
		<div class="newsupplier2_top_2_1">
					<span>类别：</span> 
					<select  name="producttype" id="producttype">
						<option  value ="0" name="producttype" id="producttype">请选择类别</option>
					</select>
				</div>