私はやろうとしています。チェックボックスのラジオボタンをクリックするとdivを表示します。私はjqueryで作成しましたが、ページをロードすると、すべてのdivが表示されます。他のdivを非表示にするには、最初のチェックボックスのラジオボタンをクリックする必要があります。または、他のチェックボックスのラジオボタンをクリックするだけです。
私は試した
#row2 {
display:none;
}
しかし、これをcssに追加したときに、最初のチェックボックスのラジオボタン（div row2に関連）をクリックすると、divが表示されず、機能しません。
ページを開いたときのその他の解決策は、チェックされているdiv（row2）のみを表示したいだけです。ページの読み込み時に他のdivを見たくありません。
ありがとう...
デモリンク：https：//rexin-demo.netlify.app/main.html
追伸：写真とボタンは、アセットのjsfiddledcuzには表示されません。デモリンクを介してそれを見る方が良いです。
.filter(':checked').click()入力のクリックイベントの最後に追加してクリックをトリガーします..試してみてください
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).val(); // use .val() instead of .attr('value')
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}).filter(':checked').click();
});
また、ラジオやチェックボックスの入力のchange代わりに使用することを好みclickます
$(document).ready(function(){
$('input[type="radio"]').on('change' ,function(){
if(this.checked){
var inputValue = $(this).val();
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}
}).filter(':checked').prop('checked' , true).change();
});
またはcssのみで使用できます
.box:not(.product){
display : none;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加