jQuery - 将点击功能分配给单选输入答案

【问题标题】：jQuery - Assign the click function to the radio inputjQuery - 将点击功能分配给单选输入
【发布时间】：2020-12-09 09:27:46
【问题描述】：

我想做的是将选中的值和点击功能分配给位于父 div 内的单选输入。我目前有此代码，但它仅适用于分配选中的值。 click() 函数不起作用：

<div id="contPosition">
 <div class="contPosition">
 <input type="radio" class="posPrint1" />
 </div>
 <div class="contPosition">
 <input type="radio" class="posPrint2" />
 </div>
 <div class="contPosition">
 <input type="radio" class="posPrint3" />
 </div>
</div>
</div>
</div>

<div id="contPrintPosition">
 <div class="contPrintPosition">
 <input type="radio" class="posPrint1" />
 </div>
 <div class="contPrintPosition">
 <input type="radio" class="posPrint2" />
 </div>
 <div class="contPrintPosition">
 <input type="radio" class="posPrint3" />
 </div>
</div>
</div>
</div>

<script>
jQuery('.contPosition').click(function () {    
    var val =  $(this).find('input:radio').prop('checked')?false:true;
    $(this).find('input:radio').prop('checked', val);
});

//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
       var curCls = $(this).attr('class');
       $(`.contPrintPosition > input.${curCls}`).val("Test");
});

//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
    if (this.previous) {
    this.checked = false;
    }
    this.previous = this.checked;                           
});
</script>

【问题讨论】：

能否请您解释一下您的问题，我无法理解问题出在哪里，重现 sn-p 并工作！
我在这一刻用 jsfiddle 尝试过，但不能正常工作
你想在“不起作用”的事件处理程序中做什么。
@Jackom 你能把小提琴发在这里吗
我在我的答案中检查了 jsfiddle，这很有效，但问题是当我第一次点击 div 并在第一次点击时没有检查输入单选但在第二次点击时。

标签： javascript jquery onclick click prop

【解决方案1】：

我不知道你想要实现什么，但只有一个点击事件可以替换所有其他事件，如下 sn-p ：

$(function() {
  //should be ".contPosition input[type=radio]"
  $('.contPosition input[type=radio]').click(function(e) {
    
    var curCls = $(this).attr('class');
    $(`.contPrintPosition > input.${curCls}`).val("Test");
    if (this.previous) {
      this.checked = false;
    }
    this.previous = this.checked;
  });
})

.contPrintPosition input::after {
  content:  attr(value);
  width:100%;
  margin-left:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
  <div class="contPosition">
    <input type="radio" class="posPrint1" />
  </div>
  <div class="contPosition">
    <input type="radio" class="posPrint2" />
  </div>
  <div class="contPosition">
    <input type="radio" class="posPrint3" />
  </div>
</div>

<div id="contPrintPosition">
  <div class="contPrintPosition">
    <input type="radio" class="posPrint1" />
  </div>
  <div class="contPrintPosition">
    <input type="radio" class="posPrint2" />
  </div>
  <div class="contPrintPosition">
    <input type="radio" class="posPrint3" />
  </div>
</div>

【讨论】：