Finding and checking radio button based on child anchor href

Question

What I need to do is set a radio button as checked based on it's child, an anchor tag, more specifically its HREF property (the HREF should be a HASH). The first stanza of code is what I've been going off of to find a solution for the part I'm struggling with.

$('article').each(function(){
  var that = $(this);
  that[ that.find('a').attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'vis' );
});

The bad code:

$('input').(function(){
  var that = $(this);
  that[ that.find('a').attr( 'href' ) === hash ? 'checked'; ]( 'checked' );
});

What the code is suppose to do, is after someone clicks a link (the link being a hash), the script will detect the hash change, and check a radio button based upon the hash, upon doing so, I have CSS3 code that I've made and tested, that will slide content out of view, and different content into view.

`input` can't have anchor as child thus `find()` or any child selector will never works. Can you share your HTML so that we can really help. — Satpal, May 25 '15 at 19:50
@Satpal I guess you may be right. If i surround the input with an anchor tag, can I find the anchor tag based on HREF, then change the checked status of its child radio button? Getting code for you now. — Kuuchuu, May 25 '15 at 19:54
@Satpal here is my code: http://i913.photobucket.com/albums/ac340/Tllc62/jsseg_zpslhub3ie2.png — Kuuchuu, May 25 '15 at 19:57
It would probably be better ,if you explained exactly what you are trying to do, on the page. How is your navigation supposed to work ? — Rainer Plumer, May 25 '15 at 20:01

Rainer Plumer · Answer 1 · 2015-05-25T20:44:39.327

to find a direct descendant of an element based on attribute, you can use a single selector.

$("input > a[href='yourhrefhasthag']").dowhateveryouwant();

*Edit

Based on your update, if you want to check an input based on link click then you can run a function when user clicks the link and do all your logic there. e.g

//somewhere in your script, you define your function

window.handle_link_click = function( hash) { if ( hash == " } //you can use data-hash ( or any other custom property) to link inputs with links.

here is a demo fiddle

and code

link 1 radio:<input type="radio" data-hash="link1" value="1"><br/>
link 2 radio:<input type="radio" data-hash="link2" value="2"><br/>
link 3 radio:<input type="radio" data-hash="link3" value="3"><br/>


<a href="javascript: handle_link_click('link1')">link 1</a><br/>
<a href="javascript: handle_link_click('link2')">link 2</a><br/>
<a href="javascript: handle_link_click('link3')">link 3</a><br/>

window.handle_link_click = function( hash, evt) {
    //uncheck all radios and only check the matching radio
    $("input[type='radio']").prop("checked", false);
    $("input[data-hash='"+hash+"']").prop("checked", true);
    //and set url to your hash
    window.location.hash = "#"+hash;
}
//you can use data-hash ( or any other custom property) to link inputs with links.

score 0 · Answer 2 · edited May 23 '17 at 12:22

Here is solution: Find an element in DOM based on an attribute value

FindByAttributeValue("href","something_value_you_need");

but at first, define this function:

<script type="text/javascript">
function FindByAttributeValue(attribute, value)    {
  var All = document.getElementsByTagName('*');
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}
</script>

score 0 · Answer 3 · answered May 25 '15 at 20:11

The input element cannot have children. If your write something like the following:

<input type="radio">
  <a href="#tab1">Test 1 2 3</a>
</input>

The browser will try to correct the HTML and infer a valid structure where input and a are siblings and not parent/child. You can check that by navigating the final DOM in a developer tool (F12, probably).

So, a solution can be starting with the anchor and then using prev or prevAll('input') to get to the input to change. You can check a sample here https://jsfiddle.net/vrp2zo8f/.

score 0 · Answer 4 · answered May 25 '15 at 20:27

Found my own solution:

$(function(){

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    if (hash == ""){
      hash = "#Home";
    };

    // Set the page title based on the hash.
    document.title = '-- | ' + ( hash.replace( /^#/, '' ) || 'Home' ) + '';

    // Iterate over all nav links, setting the "active" class as-appropriate.
    $('#navbar li').each(function(){
      var that = $(this);
      that[ that.find('a').attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'active' );
    });
    // Iterate over all articles, setting the "vis" class as-appropriate.
    $('article').each(function(){
      var that = $(this);
      that[ that.find('a').attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'vis' );
    });

    var hashID = hash
    hashID = hashID.replace(/[#]/g, "Slider");
    var theSlider = document.getElementById(hashID)
    theSlider.checked = true
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();

});

I changed the id's of the radio buttons to match the code ("Slider" + HASH)

Finding and checking radio button based on child anchor href

4 Answers4