javascript - 页面加载时选中的复选框

Question

我有一个产品项目页面，当使用 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 );
    		}

<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>

Answer 1

您收到错误

Uncaught TypeError: Cannot read property 'value' of 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 来自何处，它会起作用

此外，您也有同样的错误，输入具有

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

他们应该像

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