从tr onclick中选择单选按钮

Question

这是我在表格中的tr:

        <tr id="mlevel" class="__tr_class__" onclick="needFunction()">
            <td class="checkbox"><input type="radio" name="membership" id="__ID__" value="__ID__" /></td>
            <td class="icon"><img src="__Icon__" width="60" height="60"/></td>
            <td class="name"><h2>__Name__</h2></td>
            <td class="price"><h4>__Price__ for __Days__ Days</h4></td> 
            <td class="auto"><h4>__Auto__</h4></td>
            <td class="auto"><h4>__Active__</h4></td>
        </tr>

当我点击tr时,我想要选择无线电输入.我想使用jquery或简单的东西.只是不确定要走哪条路.有谁知道这样做的简单功能？

Answer 1

你真的不需要一个函数,以下应该工作:

$('tr').click(
    function() {
        $('input[type=radio]',this).attr('checked','checked');
    }
);

编辑回应@ whatshakin的问题:

这很有效.你能解释一下:$('input [type = radio]',this)

这将在(作为当前对象,在本例中为)的上下文中使用CSS3样式属性选择器(查找input元素type="radio")查找与'input [type = radio]'匹配的元素.thisthistr

api.jquery.com/jQuery对这是如何工作的更权威的描述/解释

编辑,因为无法取消检查收音机令我恼火,以下更正:

$(document).ready(
  function() {
    $('tr').toggle(
      function(){
        $('input:radio', this).attr('checked',true);
      },
      function() {
        $('input:radio', this).attr('checked',false);
      }
      );
  }
  );

感谢@Thomas(在评论中)指出我在前面的代码中做出的错误假设,即在$(this).attr('checked','checked')评估为true时,显然''不会评估为false.希望这种方法能够纠正早期的天真和愚蠢.

另外:演示位于jsbin

编辑上述代码(使用的代码toggle())以回应@TimBüthe的评论:

你为什么不使用":radio"伪选择器？

一个伪选择器,在我阅读他的评论之前我甚至都不知道,然后访问了jQuery API.

Answer 2

这是一个简洁的切换，无需内联 Javascript（并且具有多个单选按钮）：

代码：

$(function() { // <== Doc ready

    $('tr').click(function(event) {  

        if(event.target.type != "radio") {

            var that = $(this).find('input:radio');
            that.attr('checked', !that.is(':checked'));

        }
    });
});

jsFiddle 示例

细分：

1. .click()为所有tr元素创建一个处理程序$(tr).click()

2. 在处理程序中，使用 为 tr 内的单选按钮分配一个变量$(this).find('input:radio')。this这将查看（单击的）的所有后代tr并找到单选按钮。jQuery上下文在其实现中使用.find()，因此前面的内容与$('input:radio', this)

3. 将单选按钮的属性设置checked为与其实际相反的属性。可以使用true或来检查或取消检查事物false，并.is(':checked)返回true或false。!that.is(':checked')只是与当前检查的状态相反。请注意，如果用户直接单击单选按钮，我们不想触发此操作，因为这会取消检查的本机效果，因此我们使用if (event.target.type != "radio").