在页面加载时选中复选框

时间:2018-04-17 21:22:29

标签: javascript php

我有一个产品项页面,当页面使用JavaScript加载时,应该选择四个权重选项中的第一个。

它工作正常,但现在在对页面设计进行一些更改后似乎无法正常工作。



    $( document ).ready( function () {
    			var licnt = $( '#product-nav' ).length;
    			for ( var n = 1; n <= licnt; n++ ) {
    				$( '#price_' + n ).prop( 'checked', true );
    				var pric = document.getElementById( "price_" + n ).value;
    				document.getElementById( "prices_" + n ).innerHTML = "<?php echo $currency; ?>" + pric;
    				$( '.weightval_' + n ).val( "0.50" );
    			}
    		} );
    
    		function outputValue( item ) {
    			var pid = item.getAttribute( "id" );
    			var splitid = pid.split( "_" );
    			document.getElementById( "prices_" + splitid[ 1 ] ).innerHTML = "<?php echo $currency; ?>" + item.value;
    			var wght = item.getAttribute( "wght" );
    			$( '.weightval_' + splitid[ 1 ] ).val( wght );
    		}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form method="post" action="cart_update.php">
    	<div id="product-nav">
    	<div class="child">
    		<div id="prices_$i" class="price"></div>
    	<div id="weight-select" class="select">
    	<fieldset style="border: 0;">
    	<label>
          <input type="radio" name="price" value="<?php echo $obj->price_1 ?>" id="price_$i" wght="<?php echo $obj->weight_1 ?>" wghtid="weight_1" onChange="outputValue(this)" >
          <div>500g</div></label>
          <input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i">
        <label>
          <input type="radio" name="price" value="<?php echo $obj->price_2 ?>" id="price_$i" wght="<?php echo $obj->weight_2 ?>" wghtid="weight_2" onChange="outputValue(this)">
          <div>1kg</div></label>
          <input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i" >
        <label>
          <input type="radio" name="price" value="<?php echo $obj->price_3 ?>" id="price_$i" wght="<?php echo $obj->weight_3 ?>" wghtid="weight_3" onChange="outputValue(this)">
          <div>5kg</div></label>
          <input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i" >
        <label>
          <input type="radio" name="price" value="<?php echo $obj->price_4 ?>" id="price_$i" wght="<?php echo $obj->weight_4 ?>" wghtid="weight_4" onChange="outputValue(this)">
          <div>10kg</div></label>
          <input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i">
    	<label>
    		<input type="hidden" name="<?php echo $obj->product_code ?>" value="" />
    	</label>
    	</fieldset>
    	<input type="hidden" name="product_code" value="<?php echo $obj->product_code ?>" />
    	<input type="hidden" name="type" value="add" />
    	<input type="hidden" name="return_url" value="<?php echo $current_url ?>" />
    	</div>
    	<div class="qty">
    		<input type="button" value="–" class="qtyminus" field="product_qty" />
        <input type="text" name="product_qty" value="1" class="qty-textbox" style="margin-bottom: 0px !important"/>
        <input type="button" value="+" class="qtyplus" field="product_qty" />
    		</div>
    		<div class="add">
    			<input type="submit" value="ADD" class="add-cart">
    		</div>
    		</div>
    		</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您收到错误

  

未捕获的TypeError:无法读取属性&#39;值&#39;为null

来自你js的以下一行

var pric = document.getElementById("price_" + n).value;

这是因为您没有正确解析输入id属性,您使用的变量$i就像

id="price_$i"

然而它应该是

id="price_<?=$i?>"

您的输入应该如下所示

<input type="radio" name="price" value="<?php echo $obj->price_1 ?>" id="price_<?=$i?>" wght="<?php echo $obj->weight_1 ?>" wghtid="weight_1" onChange="outputValue(this)" >

您可能需要查看此$i来自何处并且可以正常工作

此外,inputs

的错误也是如此
<input type="hidden" name="weight" value="" id="weight_$i" class="weightval_$i">

他们应该像

<input type="hidden" name="weight" value="" id="weight_<?=$i?>" class="weightval_<?=$i?>">