Question

我正在努力实现这一目标：

当前值已在2个单选按钮上设置。
一旦选择了按钮之一，则该按钮的值（属性）应分配给带有ID的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>不能拥有value属性。
您的代码在页面加载时执行，而不是在触发某些事件时执行。
init_font_one == 'checked'将jQuery对象与字符串进行比较。
input[id="init-one-name"]可以替换为#init-one-name
您的标签未与输入链接。

$('.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 2

单击单选按钮时，必须使用on('change'更新div的值。并使用jQuery的attr更新特定元素的值。

尝试一下。

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 3

尝试

@WebMvcTest(controllers = UserController.class,
 excludeFilters = @Filter(type = FilterType.ASSIGNABLE_TYPE, classes = ExceptionHandlerAdvice.class ))

Answer 4

您应该使用jQuery change event来检测单选按钮中的更改，并将选中的单选按钮的值分配给具有id =“ test”的div

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 5

我不明白您要做什么，但是请尝试以下操作：

$( "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 6

div上没有值，但是您可以更改文本内容，也可以使用.data（）将“虚拟值”分配给div

检查代码段

$(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 7

请参阅下面的固定代码。 添加了一个侦听器，以检测通过单选按钮执行的操作，并更改了检查单选按钮是否选中的方法。

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>

JS / jQuery用于赋值

7 个答案: