CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
Marviano
Marviano

Reputation: 137

How to add specific id on radio button click function?

I want to add specific id on radio button click function because I have 2 radio button divs. This is my current code :

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>

My current jquery

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

What I have tried

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

Upvotes: 1

Views: 418

Answers (3)

Manish Goswami
Manish Goswami

Reputation: 422

Here I have added the solution it will also work if element will be created dynamically.

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>

This is solution for dynamic created element also

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

Upvotes: 1

Pedram
Pedram

Reputation: 16575

You can select it by id with input[type="radio"][id="chkperseorangan"] not input[type="radio",id="radioGroup1"] and you used parent id not radio:

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

Upvotes: 2

Marviano
Marviano

Reputation: 137

figured out by myself using this code :

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

Upvotes: 1

Related Questions