введите ввод, если радио выбрано с помощью jquery

Question

У меня есть вход и две переключатели.

Ввод принимает число в течение определенного периода времени, когда человек проживает в резиденции.

Радиокнопки - это месяцы & лет.

Я хочу заполнить второй вход, используя 1-ое входное значение (числовое значение длины при проживании), а также значение месяца или года на основе выбранного радио.

Я сделал это, выплюнул время, но он выплескивает значение для обоих переключателей, потому что у меня не было оператора if для проверки. У меня уже есть jquery в моей форме, и это работает. Мне просто нужна эта небольшая часть моей формы для работы.

Мой вопрос в том, как настроить условный оператор для проверки того, что радио проверено?

HTML

<input type="number" value="" required maxlength="5" class="form-control" name="homeLength" id="homeLength"> 
<input type="radio" id="years" value="Years" name="length" required> Years 
<input type="radio" id="months" value="Months" name="length"> Months 

JQuery

$('#months').click(function() { 
    if ($(this).attr("checked") == "checked") { 
    $('#homeLength, #months').bind('keypress blur', function() { 
     $('#homeTime').val($('#homeLength').val() + ' ' + ' ' + $('#months').val() + ' ' + ' '); 
    }); 
    } 
}); 

$('#years').click(function() { 
    if ($(this).attr("checked") == "checked") { 
    $('#homeLength, #years').bind('keypress blur', function() { 
     $('#homeTime').val($('#homeLength').val() + ' ' + ' ' + $('#years').val() + ' '); 
    }); 
    } 
}); 

Answer 1

Replave вашего яваскрипта кода с этим

$('#months').click(function() { 
     console.log($(this).prop('id')); 
     $('#homeLength, #months').bind('keypress blur', function() { 
     $('#homeTime').val($('#homeLength').val() + ' ' + ' '+$('#months').val()+ ' ' + ' '); 
     }); 
    }); 
    $('#years').click(function() { 
     console.log($(this).prop('id')); 
     $('#homeLength, #years').bind('keypress blur', function() { 
     $('#homeTime').val($('#homeLength').val() + ' ' + ' ' + $('#years').val()+ ' '); 
     }); 
    }); 

всякий раз, когда пользователь будет выбрать любую кнопку радио и может получить его идентификатор по

$(this).prop('id'); 

его значение по

$(this).prop('value'); 

Answer 2

Наиболее полезный условный оператор для такого рода поверок является:

if ($(this).is(':checked')) 

так, как вы можете увидеть ответ булев.

Answer 3

Вам нужно проверьте только проверенное значение радиостанции и сделайте это при разблокировке/размывании и нажмите любое радио

$(function() { 
 
    $('#homeLength').on('keyup, blur', function() { 
 
    var lgt = $("input:radio[name=length]:checked").val(); 
 
    $('#homeTime').val($(this).val() + ' '+lgt); 
 
    }); 
 
    $("input:radio[name=length]").on("click",function() { 
 
    $('#homeLength').blur(); // trigger the blur event of the field to update 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="number" value="" required maxlength="5" class="form-control" name="homeLength" id="homeLength"> 
 
<input type="radio" id="years" value="Years" name="length" required> Years 
 
<input type="radio" id="months" value="Months" name="length"> Months 
 
<hr/> 
 
<input type="text" value="" class="form-control" name="homeTime" id="homeTime">