检查输入单选按钮…使用$(这个) JQuery？

Question

当点击按钮时，我试图设置一个要检查的输入。我知道如何使用ID (如下面的函数中的ID)来完成此操作：

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

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

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

您可以使用查找()方法来完成所需的任务，但是标记不是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>

​