ページが読み込まれたときにアクティブなチェックボックスの入力値を取得するJquery関数。 JFIDDLE

ページが読み込まれたときに、選択したチェックボックスの値を表示する必要があります。現在、チェックボックスをクリックすると値が表示されますが、ページが読み込まれるときにデフォルトのチェックボックスから値が必要です。ここでページが読み込まれたときにアクティブなチェックボックスの入力値を取得するJquery関数。 JFIDDLE

私のコードにリンクする場合：JFIDDLE

ここでは私のページへのリンクである：ここではMy Website

は、私のコードのコピーが&ペーストである：私の上記のコメントのように

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>TEST LIST</title> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src="simpleCart.js"></script> 
</head> 
<body> 
<fieldset id="" class="" style="margin-top: 0px;font-variant: small-caps;letter-spacing: 2px;" data-role="controlgroup"> 

    <input class="weight1" type="hidden" value="2.0" > 
    <input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="20.00" checked="checked"> 
    <label class="price_weight_lable1" style="display: flex;" for="radio-choice-v-2a"> 
     <div style="flex:2;">2.0 grams</div> 
     <div style="flex:1;text-align: center;">$22.00</div> 
    </label> 


    <input class="weight2" type="hidden" value="3.5" > 
    <input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="45.00"> 
    <label class="price_weight_lable2" style="display: flex;" for="radio-choice-v-2b"> 
     <div style="flex:2;">3.5 grams</div> 
     <div style="flex:1;text-align: center;">$45.00</div> 
    </label> 


    <input class="weight3" type="hidden" value="7.0" > 
    <input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="90.00"> 
    <label class="price_weight_lable3" style="display: flex;" for="radio-choice-v-2c"> 
     <div style="flex:2;">7.0 grams</div> 
     <div style="flex:1;text-align: center;">$90.00</div> 
    </label> 
</fieldset> 

    <script> 

$('input[type=radio]').on('change', function(el){ 
    $('.weight_results').text($(this).parent().prev().val()); 
    $('.price_results').text($(this).val()); 
}); 
    </script> 




<div class="simpleCart_shelfItem"> 


    <div class="item_price"> <!-- simplecart div -->  
     <div class="price_results"></div> <!-- price function result? -->       
    </div> 

    <div class="item_weight"> <!-- simplecart div --> 
     <div class="weight_results"></div> <!-- weight function result? -->       
    </div> 


</div> 

</body> 
</html>

出典

2017-06-08 Anonymous

https://learn.jquery.com/using-jquery-core/document-ready/言いました。これをあなたの頭の中に入れ、あなたがDOMがそこにロードされた後に起こりたいJSを入れてください。 $（document）.ready（function（）{ console.log（ "ready！"）; }）; – Icewine

https://jsfiddle.net/mohamedyousef1980/vj0hmbso/1/ –

ここに例があります。これをあなたの中に入れて、目的のJSを実行してください。 WRA：

$(document).ready(function() { 
 
    alert($("#myInput").val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<input id="myInput" type="text" value="SOME TEXT HERE">

出典

2017-06-08 00:42:51 Icewine

$（ドキュメント）.ready（関数（）{ \t \t $（」.price_results'）の.text（$（」。price1" ）。valを（;））; \t }）; $（ '.weight_results'）.text（$（ "weight1"）。 –

単にchangeイベントは、ページの読み込み

$(document).ready(function(){ 
 
    $('input[type=radio]').on('change', function(el){ 
 
    $('.weight_results').text($(this).parent().prev().val()); 
 
    $('.price_results').text($(this).val()); 
 
    }).change(); // add .change to run the code on load 
 
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
 

 
<fieldset id="" class="" style="margin-top: 0px;font-variant: small-caps;letter-spacing: 2px;" data-role="controlgroup"> 
 

 
    <input class="weight1" type="hidden" value="2.0" > 
 
    <input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="20.00" checked="checked"> 
 
    <label class="price_weight_lable1" style="display: flex;" for="radio-choice-v-2a"> 
 
    \t <div style="flex:2;">2.0 grams</div> 
 
    \t \t <div style="flex:1;text-align: center;">$20.00</div> 
 
    </label> 
 
    
 

 
    <input class="weight2" type="hidden" value="3.5" > 
 
    <input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="45.00"> 
 
\t <label class="price_weight_lable2" style="display: flex;" for="radio-choice-v-2b"> 
 
\t \t <div style="flex:2;">3.5 grams</div> 
 
    \t \t <div style="flex:1;text-align: center;">$45.00</div> 
 
\t </label> 
 

 
    
 
    <input class="weight3" type="hidden" value="7.0" > 
 
    <input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="90.00"> 
 
    <label class="price_weight_lable3" style="display: flex;" for="radio-choice-v-2c"> 
 
\t \t <div style="flex:2;">7.0 grams</div> 
 
    \t \t <div style="flex:1;text-align: center;">$90.00</div> 
 
    </label> 
 
</fieldset> 
 

 

 

 
\t <div class="item_price"> <!-- simplecart div -->  
 
\t \t <div class="price_results"></div> <!-- price function result? -->       
 
\t </div> 
 
\t 
 
\t <div class="item_weight"> <!-- simplecart div --> 
 
\t \t <div class="weight_results"></div> <!-- weight function result? -->       
 
\t </div>

注上で実行するためにあなたのコードの最後で.change()を追加$(document).ready() としてIcewine上のPコードは、文書レディ機能を使用

出典

2017-06-08 01:04:11

ページが読み込まれたときにアクティブなチェックボックスの入力値を取得するJquery関数。 JFIDDLE

答えて

関連する問題