Question

我有以下代码。

<div class="days">
  <input name="days-select" type="radio" value="Mon" > Mon </input>
  <br>
  <input name="days-select" type="radio" value="Tue" > Tue </input>
</div>

<script>
  $(document).ready(function() {
    radiobtn = $('.days');
    radiobtn.find('value="Tue"').prop('checked', 'checked');
  });
</script>

基本上，我需要一个两阶段的搜索。首先，找到单选按钮组，然后将其中一个设置为已选中。但是，我不想将这两个步骤合二为一。谢谢你的提示。

顺便说一句，因为我是Javascript的新手，我想问一下如何调试这段代码。例如，单步执行脚本，并在“radiobtn = $（'。days'）之后;”检查“radiobtn”是否正确分配等。再次感谢。

Answer 1

<强> HTML

<div class="days">
    <input id="dayMonday" name="days-select" type="radio" value="Mon">
    <label for="dayMonday">Monday</label>
    <br>
    <input id="dayTuesday" name="days-select" type="radio" value="Tue">
    <label for="dayTuesday">Tuesday</label>
</div>

<强>脚本

  $(document).ready(function () {
      //your .days selector is actually getting the div and not the radio button
      var div = $('.days');
      //maybe here you want to do some things with the div...
      //...
      var radiobtn = div.find('input[value="Tue"]');
      //maybe here you want to do some things with the radio button...
      //...

      //now you have the correct element...
      radiobtn.prop('checked', true);

      //F12 in Chrome to see the console
      console.log(radiobtn);
      //notice the selector property returns: .days input[value="Tue"]
      console.log(radiobtn.selector);
      //so you could just do this all in one line:
      $('.days input[value="Tue"]').prop('checked', true);

      //see last commented line regarding this next line...
      //$('.days input[value="Tue"]').click(
      //     function(){ console.log("you clicked Tuesday");});
      //Note: you could do this: 
      //radiobtn.click();
      //... or this:
      //$('.days input[value="Tue"]').click();
      //but it also fires the click event which is why you would see 
      //"you clicked Tuesday" in the console with the above line uncommented
      });

这是fiddle。

Javascript / jQuery：在对象内搜索

1 个答案: