CODEWITHSUNDEEP
jqueryhtmlradio-button
user1815176
user1815176

Reputation: 90

jQuery stacking radio buttons

I am trying to make a link that changes addresses based on input from radio buttons, but the code that I have now just disregards the first radio button. 

var mwc1 = $("#mwc1").is(":checked");
var mwc2 = $("#mwc2").is(":checked");
var mwv2 = $("#mwv2").is(":checked");
var mbc2 = $("#mbc2").is(":checked");
var addr = "";
if (mwc1) {
    if (mwc2) {addr = "1";}
    else if (mwv2) {addr = "2";}
    else if (mbc2) {addr = "3";}
}
$("#checkout a").attr('href', addr);

Here is a jsfiddle of the whole code. Thanks!https://jsfiddle.net/a2Lkgua3/2/

Upvotes: 1

Views: 12

Answers (2)

taquion
taquion

Reputation: 2767

I know that this is answered but try the following, it should save you lot of code:

$('input[type="radio"]').click(function() {
    $("#checkout a").attr('href', $(this).data('val'));
    alert($("#checkout a").attr('href'));
   
});
a#checkoutbtn{
		background: #ECECEC;
		padding: 20px 37px;
		display: block;
		color:#7f7f7f;
        width: 145px;
		margin:50px auto;
		margin-top:100px;	
        text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
      <li>
          <input type="radio" id="mwc1" name="ms1selector" data-val = 1>
          <label for="mwc1">yahoo</label>
      </li>
  </ul>
   <ul>
       <li>
           <input type="radio" id="mwv1" name="ms1selector" data-val = 2>
           <label for="mwv1">apple</label>
       </li>
   </ul>
   <ul>
       <li>
           <input type="radio" id="mbc1" name="ms1selector" data-val =3>
           <label for="mbc1">bing</label>
  </li>
      </ul>
      <br/><br/><br/>
      <ul>
      <li>
          <input type="radio" id="mwc2" name="ms2selector"data-val =4>
          <label for="mwc2">yahoo</label>
      </li>
  </ul>
  
   <ul>
       <li>
           <input type="radio" id="mwv2" name="ms2selector"data-val =5>
           <label for="mwv2">apple</label>
       </li>
   </ul>
   <ul>
       <li>
           <input type="radio" id="mbc2" name="ms2selector"data-val =6>
           <label for="mbc2">bing</label>
  </li>
      </ul>
      

  <div id="checkout">
      <a id="checkoutbtn" href="www.google.com" > Button </a>
  </div>

Hope it helps

Upvotes: 0

DBS
DBS

Reputation: 9984

In your JS fiddle you're reusing the variable names 

var mwc1 = $("#mwc1").is(":checked");
var mwv1 = $("#mwv1").is(":checked");
var mbc1 = $("#mbc1").is(":checked");
var mwc1 = $("#mwc2").is(":checked");
var mwv1 = $("#mwv2").is(":checked");
var mbc1 = $("#mbc2").is(":checked");

I assume this is a typo and you actually wanted:

var mwc1 = $("#mwc1").is(":checked");
var mwv1 = $("#mwv1").is(":checked");
var mbc1 = $("#mbc1").is(":checked");
var mwc2 = $("#mwc2").is(":checked");
var mwv2 = $("#mwv2").is(":checked");
var mbc2 = $("#mbc2").is(":checked");

Upvotes: 1

Related Questions