Question

好的，这对你来说可能是一个普通或简单的事情，但我确实坚持了下来。

我认为这个问题已经解决了，但有一点是按顺序点击每个单选按钮（从数字1-3开始）将完全出现在文本框值中，但是当随机点击时（从数字3 - 1开始） / 2 - 3 - 1）出现的第一个值始终位于第一个文本框中。

如何在右textatrea中显示适当的值（当其选中的数字3将出现在数字3的文本框值中时）。

HTML

<form name = "form" id = "id_form">
    <table>
        <tr>
            <td><input type = "radio" name = "num1" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num1" id = "No" value = "0" />NO</td>
            <td><input type = "text" name = "display1" id = "display" /></td>
        </tr>
        <tr>
            <td><input type = "radio" name = "num2" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num2" id = "No" value = "0" />NO</td>
            <td><input type = "text" name = "display2" id = "display" /></td>
        </tr>
        <tr>
            <td><input type = "radio" name = "num3" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num3" id = "No" value = "0" />NO</td>
            <td><input type = "text" name = "display3" id = "display" /></td>
        </tr>
    </table>
</form>

的jQuery

$("input:radio").click(function(){
        $(":radio:checked").each(function(i){
            var num = i + 1;
        if($(this).val() == "1") {
            $("input:text[name=display"+num+"]").val("1");
        }else{
            $("input:text[name=display"+num+"]").val("3");
        }

        });
    });

Answer 1

添加class =＆＃34;显示＆＃34;在您的文字输入

<form name = "form" id = "id_form">
    <table>
        <tr>
            <td><input type = "radio" name = "num1" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num1" id = "No" value = "0" />NO</td>
            <td><input type = "text" class="display" name = "display1" id = "display" /></td>
        </tr>
        <tr>
            <td><input type = "radio" name = "num2" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num2" id = "No" value = "0" />NO</td>
            <td><input type = "text" class="display" name = "display2" id = "display" /></td>
        </tr>
        <tr>
            <td><input type = "radio" name = "num3" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num3" id = "No" value = "0" />NO</td>
            <td><input type = "text" class="display" name = "display3" id = "display" /></td>
        </tr>
    </table>
</form>

将您的JS更改为此

$(document).ready(function(){   
$("input:radio").change(function(){

            if($(this).val() == "1") {
            $(this).parent().parent().find(".display").val("1");
        }else{
            $(this).parent().parent().find(".display").val("3");
        }
        console.log($(this).closest(".display").val());
        });
    });

工作示例http://jsfiddle.net/RwWb2/3/

Answer 2

我不知道为什么要迭代checked无线电<input>。相反，您需要找到当前已检查的无线电元素的父索引。

$("input:radio").click(function(){
    //will find correct index and increment it with 1
    var index = ($(this).closest('tr').index() + 1);

    if($(this).val() == "1") {
        $("input:text[name=display"+index+"]").val("1");
    }else{
        $("input:text[name=display"+index+"]").val("3");
    }

});

将变量num替换为index

DEMO

Answer 3

根据下面的复选框，我认为您希望每个输入文本中有1 2 3是代码

<form name = "form" id = "id_form">
    <table>
        <tr>
            <td><input type = "radio" name = "num1" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num1" id = "No" value = "0" />NO</td>
            <td><input type = "text" class="display" name = "display1" id = "display" /></td>
        </tr>
        <tr>
            <td><input type = "radio" name = "num2" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num2" id = "No" value = "0" />NO</td>
            <td><input type = "text" class="display1" name = "display2" id = "display" /></td>
        </tr>
        <tr>
            <td><input type = "radio" name = "num3" id = "Yes" value = "1" />YES</td>
            <td><input type = "radio" name = "num3" id = "No" value = "0" />NO</td>
            <td><input type = "text" class="display2" name = "display3" id = "display" /></td>
        </tr>
    </table>
</form>

jquery代码

$(document).ready(function(){   
$("input:radio").change(function(){

            if($(this).val() == "1") {
            $(this).parent().parent().find(".display").val("1");
        }if($(this).val() == "1") {
            $(this).parent().parent().find(".display1").val("2");
        }if($(this).val() == "1") {
            $(this).parent().parent().find(".display2").val("3");
        }
    else{
            $(this).parent().parent().find(".display,.display1,.display2").val("0");
        }
        console.log($(this).closest(".display").val());
        });
    });

信用卡去dimitris :)

工作小提琴http://jsfiddle.net/maree_chaudhry/V8rCt/

Answer 4

首先，请注意，您有多个元素共享相同的id，这会使您的HTML无效（id 必须是唯一的文件）。

也就是说，一旦id被移除（因为它们是不必要的），我建议：

$('input[type="radio"]').on('change', function(){
    var that = this,
        $that = $(that);
    $that.closest('tr').find('input[type="text"]').val(that.value == 1 ? 1 : 3);
});

JS Fiddle demo

参考文献：

Attribute-equals ([attribute="value"]) selector。
closest()。
find()。
on()。
val()。

jQuery：如何在右侧textarea中显示适当的值

4 个答案: