选中输入单选按钮...使用 $(this) JQuery

Question

我正在尝试设置一个输入，以便在单击按钮时进行检查。我知道如何使用ID来执行此操作，如下所示的函数：

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

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

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

以这种方式使用 $(this( 是行不通的。关于如何使其工作的任何建议？

谢谢！

供参考的网页：

  <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无效。按钮内不应包含输入。您可以在此处对代码进行测试验证。

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