使用$（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>