[英]jQuery Show div when radio button is clicked with id instead of value
這段代碼有效,但不像我希望的那樣工作。 現在,它需要使用值來打開,我希望它使用id來打開。 我不能一直使用“ Ja”作為值,因為我有多個值的“ Ja”(未在下面的代碼中顯示)。
$( document ).ready( function () { $( "input[name=group8" ).change( function() { var test8 = $( this ).val(); $( ".desc" ).hide(); $( "#" + test8 ).show(); } ); } );
.desc { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form10" id="my_form10" method="post" action="" > <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5> <div class="radio8"> <div class="janee"> <input id="JA7" type="radio" name="group8" value="Ja"> <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per plint</label><br> <input id="NEE7" type="radio" name="group8" value="Nee"> <label for="NEE7">Nee</label> </div> </div> </form> <form id="keukenplinten"> <div id="Ja" class="desc" style="float: inherit;"> <h5>Hoeveel keukenplinten wil je laten inkorten?</h5> <input type="number" id="keukenplintenInkorten" name="keukenplinten"> </div> </form>
您可以嘗試$(this).attr('id')
代替$(this).val()
。
我想您希望'test8'變量采用選定ID的元素的值,在這種情況下,您可以使用:
var test8 = $( this ).attr('id')
您可以在此處閱讀詳細說明: 如何使用jQuery獲取元素的ID?
用這種方式
$( document ).ready( function () {
$( "input[name=group8" ).change( function() {
var test8 = $(this).attr('id')
$( ".desc" ).hide();
$( "#form_" + test8 ).show();
} );
} );
<form id="keukenplinten">
<div id="form_JA7" class="desc" style="float: inherit;"> <!-- Change ID this Way-->
<h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
<input type="number" id="keukenplintenInkorten" name="keukenplinten">
</div>
</form>
如果要使用clicked元素的ID屬性進行下一步,則可以使用以下命令:
$( document ).ready( function () {
$( "input[name=group8" ).change( function() {
var test8 = $( this ).attr("id");
$( ".desc" ).hide();
$( "#" + test8 ).show();
} );
} );
但是在這里,test8將具有ID為“ Ja7”的元素,該元素嘗試調用$( "#Ja7" )
。 該ID用於無線電元素。 因此,您需要為div使用不同的ID,即“ div_Ja7 ”
PS每個元素都有一個唯一的ID。 您不能將相同的ID分配給多個元素。
我建議您向.desc
元素添加一個data-trigger
(由我命名)屬性。
這就是說,哪個元素必須具有哪個值才能顯示此元素
jQuery(function($) { $("input[name=group8").change(function() { var id = $(this).attr('id'); var val = $(this).val(); var selector = '[data-trigger="#' + id + ':' + val + '"]' $(".desc").hide(); $(selector).show(); }); });
.desc { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form10" id="my_form10" method="post" action=""> <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5> <div class="radio8"> <div class="janee"> <input id="JA7" type="radio" name="group8" value="Ja"> <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per plint</label><br> <input id="NEE7" type="radio" name="group8" value="Nee"> <label for="NEE7">Nee</label> </div> </div> </form> <form id="keukenplinten"> <div id="Ja" data-trigger="#JA7:Ja" class="desc" style="float: inherit;"> <h5>Hoeveel keukenplinten wil je laten inkorten?</h5> <input type="number" id="keukenplintenInkorten" name="keukenplinten"> </div> </form>
我建議您在“輸入”上引入新屬性,例如“數據ID”(它將為多個輸入分配相同的值),請參見以下代碼
<form name="form10" id="my_form10" method="post" action="" >
<h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
<div class="radio8">
<div class="janee">
<input id="JA7" data-id="ABC1" type="radio" name="group8" value="Ja">
<label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per
plint</label><br>
<input id="NEE7" data-id="ABC2" type="radio" name="group8" value="Nee">
<label for="NEE7">Nee</label>
</div>
</div>
</form>
<form id="keukenplinten">
<div id="ABC1" class="desc" style="float: inherit;">
<h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
<input type="number" id="keukenplintenInkorten" name="keukenplinten">
</div>
</form>
並在Jquery中使用:
$( document ).ready( function () {
$( "input[name=group8" ).change( function() {
var test8 = $( this ).attr("data-id");
$( ".desc" ).hide();
$( "#" + test8 ).show();
});
} );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.