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 。

＆＃13;

$(".buttonsQuestion50").click(function() {
   $(this).find('input[type="radio"]').prop('checked', true);
 });

＆＃13;

<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>

＆＃13;

我建议您使用div元素而不是按钮或任何其他适合的元素，只要您使用Bootstrap类，它们看起来与按钮相同，如下所示：

＆＃13;

$(".buttonsQuestion50").click(function() {
  $(this).find('input[type="radio"]').prop('checked', true);
});

＆＃13;

<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>

＆＃13;

使用$（this）JQuery检查输入单选按钮...

1 个答案: