检查输入单选按钮...使用 $(this) JQuery？

Question

我正在尝试设置在单击按钮时要检查的输入。我知道如何使用下面函数中的 ID 来执行此操作：

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

我正在尝试弄清楚如何使用 $(this) 来实现相同的功能。目标如下：

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