Question

我需要让用户使用单选按钮进行选择，并且该选择中的文本需要出现在页面后面的文本框中： HTML：

            <div id="centercontainer">
            <h1>competition</h1>
            <form id="devices">
                <fieldset>
                <div id="bf">
                    <img src="images/_black_fuchsia.jpg" width="169" height="266" alt=" Black Fuchsia">
                    <p><label> <input class="selected-bf" type=radio name=Lumia> Fuchsia on Black</label></p>
                </div>
                <div id="bw">
                    <img src="images/_black_white.jpg" width="169" height="266" alt=" Black White">
                    <p><label> <input class="selected-bw" type=radio name=Lumia> White on Black</label></p>
                </div>

                <div id="by">
                    <img src="images/_black_yellow.jpg" width="169" height="266" alt=" Black Yellow">
                    <p><label> <input class="selected-by" type=radio name=Lumia> Yellow on Black</label></p>
                </div>
                <div id="wb">
                    <img src="images/_white_black.jpg" width="169" height="266" alt=" White Black">
                    <p><label> <input class="selected-wb" type=radio name=Lumia> Black on White</label></p>
                </div>
                <div id="wc">
                    <img src="images/_white_cyan.jpg" width="169" height="266" alt=" White Cyan">
                    <p><label> <input class="selected-wc" type=radio name=Lumia> Cyan on White</label></p>
                </div>
                <div id="wf">
                    <img src="images/_white_fuchsia.jpg" width="169" height="266" alt=" White Fuchsia">
                    <p><label> <input class="selected-wf" type=radio name=Lumia> Fuchsia on White</label></p>
                </div>
                </fieldset>
            </form>
        </div>
        <div id="footer">
            <button class="choose">Choose</button>
        </div>

使用Javascript：

    // Style chooser    
$('#devices div').toggle(function() { // first time
    $(this).find('input:radio').attr('checked', true);
}, function() { // second time
    $(this).find('input:radio').attr('checked', false);
});

$('.choose').click(function() {
   if($('input:radio').is(':checked')) { alert("it's checked"); }
});

一旦用户做出选择，那么该选择的文本是否可以输入到底部的文本字段中？

Answer 1

尝试将此绑定到按钮

$('.choose').click(function() 
{    
     $('#output').text($('input:radio:checked').closest('label').text());
});

假设你添加一个带有id输出的div，即

<div id="output"></div>

还假设您在页面上只有一组单选按钮。否则，您需要限定输入选择，例如使用类或父元素

Answer 2

我很确定你可以这样做：

$('.choose').click(function() {
   if($('input:radio').is(':checked')) { alert($(this).val()); }
});

一旦你有了“$（this）.val（）”，你可以将它传递给任何你想做的任何你想做的功能。

Answer 3

假设您有一个名为“foo”的文本字段：

$('button').click(function(){
    $('input[name="foo"]').val( $('input[name="Lumia"]:checked').parent().text() );
});

请注意，在您的示例中，您应将attibute值括在引号中作为良好格式。

<input class="selected-wf" type=radio name=Lumia>应为<input class="selected-wf" type="radio" name="Lumia">

是否可以使用jQuery＆amp; amp;将元素中的文本输入到表单中单选按钮？

3 个答案: