Сделать входной переключатель включен ... используя $ (this) JQuery?

Question

Я пытаюсь установить вход для проверки, когда нажимается кнопка. Я знаю, как сделать это, используя идентификатор, как в функции ниже:

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

Я пытаюсь выяснить, как сделать ту же самую функциональность работы с помощью $ (это). Целью является следующее:

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

Использование $ (этого) в этом случае не работает. Любые советы о том, как заставить его работать?

Спасибо!

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>

Я бы порекомендовал вам использовать div элементы вместо кнопок, или любых другие встроенных элементы, до тех пор, пока вы используете Bootstrap классов они будут выглядеть так же, как кнопки, как это:

$(".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>