基于单选的表格中的jQuery / Javascript设置输入框

时间：2018-09-18 21:01:53

标签： javascript jquery html

我正在尝试根据表格内的单选选择删除输入框内的值。这是一张桌子，这确实给我带来了麻烦。

在我提供的有趣示例中，如果他们说他们不喜欢单选按钮上的炸玉米饼，我想删除他们最喜欢的食物。这是我尝试解决我的问题的尝试之一，但是它没有任何作用。 

$(function() {
  $
  var $row = $(this).closest('tr')
  $('.likesTacos').change(function() {
    if (!$row.find(".likesTacos[value=['1']").is(":checked")) {
      $row.find('.favFood').val("")
    } else {
      console.log("Good choice in food!")
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
      </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Bart</td>
    <td>Starr</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
</table>

3 个答案:

答案 0 :(得分：1)

您是如此接近，您只是将事件中的行定义推送到$(this)对象的上下文中。

像这样，关键字this代表更改后的单选按钮，而最接近的关键字将获得更改后的单选按钮的上级tr。

注意1：：在准备好函数定义后删除多余的美元符号$。

注2：：您可以使用.val()来简化条件：

if ($(this).val() == 0) {

缩窄版本可以放在一行：

$(this).val() == 0 ? $(this).closest('tr').find('.favFood').val("") : console.log("Good choice in food!");


$(function() {
  $('.likesTacos').change(function() {
    var row = $(this).closest('tr');

    if ( $(this).val() == 0 ) {
      row.find('.favFood').val("");
    } else {
      console.log("Good choice in food!");
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=1/>Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
      </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Bart</td>
    <td>Starr</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
</table>

答案 1 :(得分：1)

也许您可以采用一种更简单的方法，只需检查单击/更改的单选按钮的值，就像这样：

$(function () {

$('.likesTacos').change(function() {
  var row = $(this).closest('tr');

    // Just examine the value of the changed radio button. 
    // If it's zero, then consider this a "no" answer
    if ($(this).val() == '0') {
      row.find('.favFood').val("")
    } else {
      console.log("Good choice in food!")
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td> 
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>                        
    <div>
    <label><input type="radio" name="tacos1" class="likesTacos" value=1 />Yes</label>
    </div>
    <div>
    <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
    </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td> 
    <td><input textbox class="favFood" value="Tacos"></td>
        <td>
        <div>
    <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
    </div>
    <div>
    <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
    </div>
    </td>
  </tr>
    <tr>
    <td>Bart</td>
    <td>Starr</td> 
    <td><input textbox class="favFood" value="Tacos"></td>
        <td>
        <div>
    <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
    </div>
    <div>
    <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
    </div>
    </td>
  </tr>
</table>

答案 2 :(得分：1)

您可以将其空白，但如果他们改变主意，也可以放回原处：）

在这里，我会逐步引导您完成代码

// reference to food
let fd = $(this).closest('tr').find('.favFood');
// food value, if blank, get the origial stored
let v = fd.val() == "" ? fd.data('org') : fd.val();
// store our value v
fd.data('org', v);
// blank or not depending on the value
fd.val(($(this).val() == 1) ? v : "");


$(function() {
  $('.likesTacos').on('change', function() {
    let fd = $(this).closest('tr').find('.favFood');
    let v = fd.val() == "" ? fd.data('org') : fd.val();
    fd.data('org', v);
    fd.val(($(this).val() == 1) ? v : "");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
      </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Bart</td>
    <td>Starr</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
</table>

相关问题
最新问题