Question

我看了很多，并且可以看到很多方法来获取单选按钮的值，但是没有采取下一步并将相同的值设置为一组类似的单选按钮。复制文本值工作正常，只是无法复制单选按钮。

编辑：我添加了整个相关的html：

<div class="form-container">            
<div class="form-titles">
    <h4>Customer <span>Shipping</span> Information</h4> 
    </div>      



<div id="fillout-form"> 


        <label for="name"><span>*</span>Contact Name:</label>
            <input type="text" id="name" name="name" maxlength="50" class="required" />
        <label for="company"><span>*</span>Company Name:</label>
            <input type="text" id="company" name="company" maxlength="50" class="required" />   
        <label for="land-line"><span>*</span>Primary Phone:</label>
            <input type="text" id="land-line" name="land-line" maxlength="50" class="required" />
        <label for="cell">Cell Phone:</label>
            <input type="text" id="cell" name="cell" maxlength="50" />  
        <label for="email"><span>*</span>Email:</label>
            <input type="email" id="email" name="email" maxlength="50" class="required" />
        <label for="fax">Fax:</label>
            <input type="text" id="fax" name="fax" maxlength="50" />    
        <label for="address"><span>*</span>Street Address:</label>
            <input type="text" id="address" name="address" maxlength="50" class="required" />
        <label for="address-2">Street Address 2:</label>
            <input type="text" id="address-2" name="address-2" maxlength="50" />    
        <label for="city"><span>*</span>City:</label>
            <input type="text" id="city" name="city" maxlength="50" class="required" />
        <label for="state"><span>*</span>State or Province:</label>
            <input type="text" id="state" name="state" maxlength="50" class="required" />
        <label for="zip"><span>*</span>Zip / Postal Code:</label>
            <input type="text" id="zip" name="zip" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
    <div id="radio-buttons">
        <label for="country"><span>*</span>Country:</label>
            <div id="multi-line-radio"><input type="radio" name="country" id="country" value="USA" class="required" checked >United States</div>
            <div id="multi-line-radio"><input type="radio" name="country" id="country" value="Canada" >Canada</div>
    </div>  
</div>

<div class="form-container">    
<div class="form-titles">   
            <h4>Customer <span>Billing</span> Information</h4>  
        <div class="same-address">
        <input type="checkbox" name="same-address" value="same-address" id="copyCheck"><p>Same as Shipping Address?</p>
        </div>
</div>      
<div id="fillout-form"> 

        <label for="name_2"><span>*</span>Contact Name:</label>
            <input type="text" id="name_2" name="name_2" maxlength="50" class="required" />
        <label for="company_2"><span>*</span>Company Name:</label>
            <input type="text" id="company_2" name="company_2" maxlength="50" class="required" />   
        <label for="land-line_2"><span>*</span>Primary Phone:</label>
            <input type="text" id="land-line_2" name="land-line_2" maxlength="50" class="required" />
        <label for="cell_2">Cell Phone:</label>
            <input type="text" id="cell_2" name="cell_2" maxlength="50" />  
        <label for="email_2"><span>*</span>Email:</label>
            <input type="email" id="email_2" name="email_2" maxlength="50" class="required" />
        <label for="fax_2">Fax:</label>
            <input type="text" id="fax_2" name="fax_2" maxlength="50" />    
        <label for="PO-Box_2">PO-Box:</label>
            <input type="text" id="PO-Box_2" name="PO-Box_2" maxlength="50" />                  
        <label for="address_2">Street Address:</label>
            <input type="text" id="address_2" name="address_2" maxlength="50" />
        <label for="address-2_2">Street Address 2:</label>
            <input type="text" id="address-2_2" name="address-2_2" maxlength="50" />    
        <label for="city_2"><span>*</span>City:</label>
            <input type="text" id="city_2" name="city_2" maxlength="50" class="required" />
        <label for="state_2"><span>*</span>State or Province:</label>
            <input type="text" id="state_2" name="state_2" maxlength="50" class="required" />
        <label for="zip_2"><span>*</span>Zip / Postal Code:</label>
            <input type="text" id="zip_2" name="zip_2" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
    <div id="radio-buttons">
        <div id="country_option_2">
        <label for="country_2"><span>*</span>Country:</label>
            <div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="USA" class="required" checked >United States</div>
            <div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="Canada" >Canada</div>
        </div>
    </div>  

</div>

和jQuery：

$(document).ready(function(){
$(function(){
$("#copyCheck").change(function() {
    if ($("#copyCheck:checked").length > 0) {
        bindGroups();
    } else {
        unbindGroups();
    }
    });
});

var bindGroups = function() {

$("input[id='name_2']").val($("input[id='name']").val());
$("input[id='company_2']").val($("input[id='company']").val());
$("input[id='land-line_2']").val($("input[id='land-line']").val());
$("input[id='cell_2']").val($("input[id='cell']").val());
$("input[id='email_2']").val($("input[id='email']").val());
$("input[id='fax_2']").val($("input[id='fax']").val());
$("input[id='address_2']").val($("input[id='address']").val());
$("input[id='address-2_2']").val($("input[id='address-2']").val());
$("input[id='city_2']").val($("input[id='city']").val());
$("input[id='state_2']").val($("input[id='state']").val());
$("input[id='zip_2']").val($("input[id='zip']").val());
$("input:radio[name=country_2]:checked").val($("input:radio[name=country]:checked").val());







 $("input[id='name']").keyup(function() {
    $("input[id='name_2']").val($(this).val());
});
$("input[id='company']").keyup(function() {
    $("input[id='company_2']").val($(this).val());
});
$("input[id='land-line']").keyup(function() {
    $("input[id='land-line_2']").val($(this).val());
});
$("input[id='cell']").keyup(function() {
    $("input[id='cell_2']").val($(this).val());
});
$("input[id='email']").keyup(function() {
    $("input[id='email_2']").val($(this).val());
});
$("input[id='fax']").keyup(function() {
    $("input[id='fax_2']").val($(this).val());
});
$("input[id='address']").keyup(function() {
    $("input[id='address_2']").val($(this).val());
});
$("input[id='address-2']").keyup(function() {
    $("input[id='address-2_2']").val($(this).val());
});
$("input[id='city']").keyup(function() {
    $("input[id='city_2']").val($(this).val());
});
$("input[id='state']").keyup(function() {
    $("input[id='state_2']").val($(this).val());
});
$("input[id='zip']").keyup(function() {
    $("input[id='zip_2']").val($(this).val());
});

};

var unbindGroups = function() {
$("input[id='name']").unbind("keyup");
$("input[id='company']").unbind("keyup");
$("input[id='land-line']").unbind("keyup");
$("input[id='cell']").unbind("keyup");
$("input[id='email']").unbind("keyup");
$("input[id='fax']").unbind("keyup");
$("input[id='address']").unbind("keyup");
$("input[id='address-2']").unbind("keyup");
$("input[id='city']").unbind("keyup");
$("input[id='state']").unbind("keyup");
$("input[id='zip']").unbind("keyup");


   };





   });

Answer 1

关闭输入标记

例如

<input type="radio" name="country" value="Canada">

应该是

<input type="radio" name="country" value="Canada"/>

ID是唯一的

在特定文档中存在一次，并且只存在一次。

例如

<div id="radio-buttons">...</div><div id="radio-buttons">...</div>

应该是

<div id="radio-buttons-1">...</div><div id="radio-buttons-2">...</div>

或

<div class="radio-buttons">...</div><div class="radio-buttons">...</div>

敞开心扉

似乎没有必要在个人的基础上处理这些问题，你应该认为“我怎样才能让那些复制到这里”而不是“让我们复制一下一个，这个和这一个......“

这会给你看起来更像这样的jquery：

var ship = $('.form-container').eq(0).find('input'),//first fields
    bill = $('.form-container').eq(1).find('input').not('#copyCheck,#PO-Box_2');//second fields

$('#copyCheck').on('change', function () {
    if ($(this).prop('checked')) { bindGroups(); }//checked:bind answers
    else { unbindGroups(); }//!checked:remove answers
});

function brains(e,i) {//runs on bindgroups and on irt
    var tc;
    if (e.is('[type=radio]')) {//if radio
        tc = e.prop('checked');//get checked
        bill.eq(i).prop('checked',tc);//add checked to corresponding element
    } else if(e.is('[type=text],[type=email]')) {//if text or email
        tc = e.val();//get value
        bill.eq(i).val(tc);//add value to corresponding element
    }
}

function bindGroups() {//copy
    ship.each(function(i){//for each input
        brains($(this),i);//run brains
        $(this).on('keyup change', function() {//on keyup or change
            brains($(this),i);//run brains
        });
    });
}

function unbindGroups() {//clear the deck
    ship.each(function(i){//for each input
        if ($(this).is('[type=radio]')) {//if radio
            bill.eq(i).prop('checked',false);//reset radio optional
        } else if($(this).is('[type=text],[type=email]')) {//if text or email
            bill.eq(i).val('');//empty text optional
        }
    }).unbind();//unbind actions
}

这样你就不会单独为每个元素编写jquery。

做了一个小提琴： http://jsfiddle.net/filever10/bC3mQ/

使用JQuery从单选按钮和复制值获取值

1 个答案: