Question

我想在单选按钮点击功能上添加特定ID，因为我有2个单选按钮div。这是我目前的代码：

HTML

<div id="radioGroup1" style="font-size:1em;">
  <input type="radio" name="chooseBentukUsaha" id='chkperseorangan' value="Perseorangan" class="radiobentukusaha" checked> Perseorangan &nbsp;
  <input type="radio" name="chooseBentukUsaha" id='chkpt' value="checkGroup" class="radiobentukusaha"> PT &nbsp;
  <input type="radio" name="chooseBentukUsaha" id='chkcv' value="CV" class="radiobentukusaha"> CV &nbsp;
</div>

<div id="radioGroup2" style="font-size:0.8em;">
   <input type="radio" name="choose" id='chkusaha' value="Pengembangan Usaha" class="radiopurpose" checked> Modal Usaha &nbsp;
   <input type="radio" name="choose" id='chkpengembangan' value="Pengembangan Usaha" class="radiopurpose"> Pengembangan Usaha &nbsp;
   <input type="radio" name="choose" id='chkstartup' value="Start Up" class="radiopurpose"> Penambahan Stok &nbsp;
   <input type="radio" name="choose" id='chklain' value="Lain-lain" class="radiopurpose"> Ekspansi &nbsp;
   <input type="radio" name="choose" id='chklain' value="Lain-lain" class="radiopurpose"> Lain-lain &nbsp;
</div>

我当前的jquery

$('input[type="radio"]').click(function() {
     var inputValue = $(this).attr("value");
     var targetBox = $("." + inputValue);
     $(".box").not(targetBox).hide();
     $(targetBox).show();
});

我尝试了什么

$('input[type="radio",id="radioGroup1"]').click(function() {
     var inputValue = $(this).attr("value");
     var targetBox = $("." + inputValue);
     $(".box").not(targetBox).hide();
     $(targetBox).show();
});

Answer 1

您可以使用input[type="radio"][id="chkperseorangan"]而不是input[type="radio",id="radioGroup1"]按ID选择它，并使用父id而不是radio：

＆＃13;

$('input[type="radio"][id="chkpt"]').click(function() {
  alert('Its me!');
  //var inputValue = $(this).attr("value");
  //var targetBox = $("." + inputValue);
  //$(".box").not(targetBox).hide();
  //$(targetBox).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radioGroup1" style="font-size:1em;">
  <input type="radio" name="chooseBentukUsaha" id='chkperseorangan' value="Perseorangan" class="radiobentukusaha" checked> Perseorangan &nbsp;
  <input type="radio" name="chooseBentukUsaha" id='chkpt' value="checkGroup" class="radiobentukusaha"> PT &nbsp;
  <input type="radio" name="chooseBentukUsaha" id='chkcv' value="CV" class="radiobentukusaha"> CV &nbsp;
</div>

<div id="radioGroup2" style="font-size:0.8em;">
  <input type="radio" name="choose" id='chkusaha' value="Pengembangan Usaha" class="radiopurpose" checked> Modal Usaha &nbsp;
  <input type="radio" name="choose" id='chkpengembangan' value="Pengembangan Usaha" class="radiopurpose"> Pengembangan Usaha &nbsp;
  <input type="radio" name="choose" id='chkstartup' value="Start Up" class="radiopurpose"> Penambahan Stok &nbsp;
  <input type="radio" name="choose" id='chklain' value="Lain-lain" class="radiopurpose"> Ekspansi &nbsp;
  <input type="radio" name="choose" id='chklain' value="Lain-lain" class="radiopurpose"> Lain-lain &nbsp;
</div>

＆＃13;

Answer 2

在这里，我添加了解决方案，如果动态创建元素，它也将起作用。

HTML

<div id="radioGroup1" style="font-size:1em;">
  <input type="radio" name="chooseBentukUsaha" id='chkperseorangan' value="Perseorangan" class="radiobentukusaha" checked> Perseorangan &nbsp;
  <input type="radio" name="chooseBentukUsaha" id='chkpt' value="checkGroup" class="radiobentukusaha"> PT &nbsp;
  <input type="radio" name="chooseBentukUsaha" id='chkcv' value="CV" class="radiobentukusaha"> CV &nbsp;
</div>

<div id="radioGroup2" style="font-size:0.8em;">
   <input type="radio" name="choose" id='chkusaha' value="Pengembangan Usaha" class="radiopurpose" checked> Modal Usaha &nbsp;
   <input type="radio" name="choose" id='chkpengembangan' value="Pengembangan Usaha" class="radiopurpose"> Pengembangan Usaha &nbsp;
   <input type="radio" name="choose" id='chkstartup' value="Start Up" class="radiopurpose"> Penambahan Stok &nbsp;
   <input type="radio" name="choose" id='chklain' value="Lain-lain" class="radiopurpose"> Ekspansi &nbsp;
   <input type="radio" name="choose" id='chklain' value="Lain-lain" class="radiopurpose"> Lain-lain &nbsp;
</div>

这是动态创建元素的解决方案

var i = 1;
$('input[type="radio"]').on('click',function() {
  alert('Its me!');
  var element = "youId_"+i;
  var inputValue = $(this).attr("id",element);
  i++;
});

Answer 3

我自己想出了这个代码：

$('input[name="chooseBentukUsaha"]').click(function() {
       var inputValue = $(this).attr("value");
       var targetBox = $("." + inputValue);
       $(".box").not(targetBox).hide();
       $(targetBox).show();
});

如何在单选按钮点击功能上添加特定ID？

3 个答案: