JS / jQuery для присвоения значений

Question

Я пытаюсь добиться этого:

1. В настоящее время значение установлено на 2 переключателях.
2. После выбора одной из кнопок значение (атрибут) этой кнопки должно быть присвоено значению div с идентификатором.

Я не уверен, где я иду не так. Ниже приведен фрагмент кода.

var init_font_one = $('input[id="init-one-name"]'),
  init_font_two = $('input[id="init-two-name"]'),
  init_id_value = $("#test");

if (init_font_one == 'checked') {
  init_id_value.val(init_font_one.val());
}

if (init_font_two == 'checked') {
  init_id_value.val(init_font_two.val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="abc"> Testing
<input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
<input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>

Answer 1

В div нет значения, но вы можете изменить текстовое содержимое или передать виртуальное значение div, используя .data ()

Проверьте фрагмент

$(function(){ // On jquery initialize
  var idtest = $('#test'); // the target Div
	$('input[type="radio"]').on('change',function(){ // change event for the two radio buttons
  	 
     /*** Method 1 : Using data attribute to assing a value ***/
     idtest.data('value',$(this).val()); // Value of the selected radio
		 
     /*** Method 2 : Add the value of the selected radio to the text inside the div ***/
     idtest.text( $(this).val() ) // Value of the selected radio
     
     //retrieve the setted data value
     console.log( idtest.data('value') );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
 Testing
</div>
 
 <input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
  
 <input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>

Answer 2

См. Фиксированный код ниже. Добавлен прослушиватель для обнаружения действий, выполняемых с помощью переключателей, и изменен метод проверки наличия или отсутствия радиообмена.

let ele = document.getElementById('init-one-div');
ele.addEventListener('click', function(e) {
  if ("INPUT" === e.target.nodeName)
    checkAndAssign();
});

function checkAndAssign() {
  var init_font_one = $('#init-one-name'),
    init_font_two = $('#init-two-name'),
    init_id_value = $("#test");

  if (init_font_one.is(':checked')) {
    init_id_value.val(init_font_one.val());
  }

  if (init_font_two.is(':checked')) {
    init_id_value.val(init_font_two.val());
  }

  //REMOVE below line if you want to remove the line printing the result
  init_id_value.html(' Testing [ ' + init_id_value.val() + ' ] ');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
  Testing
</div>

<div id="init-one-div">
  <input id="init-one-name" type="radio" name="init-one-name" value="abcd"> <label>Test1</label>

  <input id="init-two-name" type="radio" name="init-one-name" value="xyz"> <label>Test2</label>
</div>

Answer 3

Я не понимаю, что вы пытаетесь сделать, но попробуйте это:

$( "input[name='init-one-name']" ).change(function(){
  $('#test').val('New Value: ' + $(this).val());
});

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <textarea id="test">Testing
    </textarea><BR>
     
     <input type="radio" name="init-one-name" value="abcd"><label>Op 1</label>
      <input type="radio" name="init-one-name" value="xyz"><label>OP 2</label>

Answer 4

Вы должны использовать on('change', чтобы обновить значение div, когда радио-кнопка нажата. И используйте attr jQuery для обновления значения определенного элемента.

Попробуй это.

var init_font_one = $('input[id="init-one-name"]'),
				init_font_two = $('input[id="init-two-name"]'),
				init_id_value = $("#test");

init_font_one.change(function() {
  init_id_value.attr("value",init_font_one.val());
  console.log(init_id_value.attr("value"));
});

init_font_two.on('change',function() {
  init_id_value.attr("value",init_font_two.val());
  console.log(init_id_value.attr("value"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
 Testing
 </div>
 
 <input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
  
        <input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>

Answer 5

С вашим кодом мало проблем:

1. <div> не может иметь value свойство.
2. Ваш код выполняется при загрузке страницы, а не при запуске какого-либо события.
3. init_font_one == 'checked' сравнивает объект jQuery со строкой.
4. input[id="init-one-name"] можно заменить на #init-one-name
5. Ваши ярлыки не связаны с входами.

$('.radios').change(function() {
  $("#test").val($('.radios:checked').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <!-- uncomment below -->
  <!--<input type="hidden" id="test" value="abc"/>-->
  <input type="text" id="test" value="abc" /> Testing
</div>

<input class="radios" id="init-one-name" type="radio" name="init-one-name" value="abcd"><label for="init-one-name">Test1</label>

<input class="radios" id="init-two-name" type="radio" name="init-one-name" value="xyz"><label for="init-two-name">Test2</label>

Answer 6

Вы должны использовать jQuery change event, чтобы обнаружить изменение в переключателях и назначить значение отмеченного переключателя для div с id = "test"

var init_id_value = $("#test");

$('input[id="init-one-name"]').on('change', function() {
  init_id_value.text($(this).val());
});
$('input[id="init-two-name"]').on('change', function() {
  init_id_value.text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
 Testing
 </div>
 
 <input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
  
        <input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>

Answer 7

попробуйте

$(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = 
$("input[name='init-one-name']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });

    });