使用$（this）JQuery來檢查輸入單選按鈕嗎？

Question

我試圖設置一個輸入來檢查它的按鈕被點擊。我知道如何做到這一點使用ID喜歡在下面的功能：

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

我會建議你使用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>