$（this）JQueryを使用して入力ラジオボタンをオンにしますか？

Question

ボタンをクリックしたときに入力をチェックするように設定しようとしています。私は、以下の機能のようにIDを使用してこれを実行する方法を知っている：私は$（this）を使用して同じ機能を動作させる方法を把握しようとしている

$(".buttonsQuestion50").click(function() { 
$('#radio-1').prop('checked',true); 
}); 

。目標は次のとおりです。

$(".buttonsQuestion50").click(function() { 
    $(this).prop('checked',true); 
    }); 

このように$（this）を使用することはできません。どのように動作させるためのアドバイス？

ありがとうございます！参照用

HTML：

<div class="button-box col-lg-12 col-xs-12"><!-- 
    --><button id="masters" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
     <input class='' type="radio" name="group1" id="radio-1"> Agree </button><!-- 
    --><button id="doctorate" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
     <input class='' type="radio" name="group1" id="radio-2"> Strongly Agree </button><!-- 
    --></div> 
    <div class="button-box col-lg-12 col-xs-12"><!-- 
    --><button id="associates" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
     <input class='' type="radio" name="group1" id="radio-3">Disagree</button><!-- 
    --><button id="bachelors" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
    <input class='' type="radio" name="group1" id="radio-5">Strongly Disagree </button><!-- 
    --></div> 

Answer 1

あなたが必要なものを行うにはfind()メソッドを使用できますが、マークアップは、有効なW3Cではありません。ボタンの中に入力があってはいけません。あなたのコードのテスト検証を行うことができますhere。

$(".buttonsQuestion50").click(function() { 
 
    $(this).find('input[type="radio"]').prop('checked', true); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button-box col-lg-12 col-xs-12"> 
 
    <!-- 
 
    --> 
 
    <button id="masters" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-1">Agree</button> 
 
    <!-- 
 
    --> 
 
    <button id="doctorate" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-2">Strongly Agree</button> 
 
    <!-- 
 
    --> 
 
</div> 
 
<div class="button-box col-lg-12 col-xs-12"> 
 
    <!-- 
 
    --> 
 
    <button id="associates" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-3">Disagree</button> 
 
    <!-- 
 
    --> 
 
    <button id="bachelors" type="button" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-5">Strongly Disagree</button> 
 
    <!-- 
 
    --> 
 
</div>

私はあなたがいる限り、あなたが Bootstrapクラスを使用すると、彼らはこのようなボタンと同じになります、 div代わりにボタンの要素、または任意の他のフィットの要素を使用することをお勧めします

：

$(".buttonsQuestion50").click(function() { 
 
    $(this).find('input[type="radio"]').prop('checked', true); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button-box col-lg-12 col-xs-12"> 
 
    <!-- 
 
    --> 
 
    <div id="masters" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-1">Agree</div> 
 
    <!-- 
 
    --> 
 
    <div id="doctorate" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-2">Strongly Agree</div> 
 
    <!-- 
 
    --> 
 
</div> 
 
<div class="button-box col-lg-12 col-xs-12"> 
 
    <!-- 
 
    --> 
 
    <div id="associates" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-3">Disagree</div> 
 
    <!-- 
 
    --> 
 
    <div id="bachelors" class="fourButtons buttonsQuestion50 btn btn-info "> 
 
    <input class='' type="radio" name="group1" id="radio-5">Strongly Disagree</div> 
 
    <!-- 
 
    --> 
 
</div>