CODEWITHSUNDEEP
jqueryasp.nethtmlhtml-select
Sam Carleton
Sam Carleton

Reputation: 1398

Removing a radio button with jQuery

The form has one or more groups of radio buttons on it. It is possible for the value to start off with the value of ^. Once another value is selected, ^ is no longer viable, so it's div needs to be hidden. Here is the source and the html, along with a link to it in jsfiddle: http://jsfiddle.net/RSNxS/

$(function(){

    $('.tristateRadio').bind("change", handleTristateRadioChange);

    function handleTristateRadioChange(e) {
        var button = $this;
        var id = button.id();

        $("#"+id).filter(
            function(){ this.value == "^"}
        ).parent().hide();
    }
});

html

$<div class="questionItem">
    <h3>C0900A</h3>
Staff asmt mental status: recall current season <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_12__Answer" name="answers[12].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900B</h3>
Staff asmt mental status: recall location of room <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_13__Answer" name="answers[13].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900C</h3>
Staff asmt mental status: recall staff names/faces <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_14__Answer" name="answers[14].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900D</h3>
Staff asmt mental status: recall in nursing home <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_15__Answer" name="answers[15].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

<div class="questionItem">
    <h3>C0900Z</h3>
Staff asmt mental status: none of above recalled <br/>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
        <div class="questionCheckbox"><input class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="-" /> (-) Not assessed</div>
        <div class="questionCheckbox"><input checked="checked" class="tristateRadio" id="answers_16__Answer" name="answers[16].Answer" type="radio" value="^" /> (^) Blank (skip pattern)</div>
</div>

Upvotes: 0

Views: 380

Answers (3)

mkoryak
mkoryak

Reputation: 57958

your code is all kinds of broken:

  • there is no implicit $this variable
  • there is no .id() function
  • you dont need to filter a jquery object selected with the id selector when you can just use an if statement
  • as someone else pointed out, DOM ids must be unique, so had i left that id selector you had in your code, it would select the incorrect element 2/3 of the time.
  • there is no need to reselect the current element in the event handler when the current element is this
  • nitpick: prefix variables that are jquery objects with $ for readability

edit: my code sucks, i leave you just the comments

Upvotes: 2

andyb
andyb

Reputation: 43823

You should definitely fix the multiple id issues, which is invalid HTML and could cause undesired and unexpected behaviour (as others have already mentioned).

However the following does not use selection by id and will hide the last <input> with value = ^ in a group, when any of the other siblings are changed:

$('.tristateRadio').bind('change', function() {
    $(this).parent().siblings(':last').hide();
});

The original code in the question is not working because $this is undefined. I think you probably meant $(this) in order to wrap the native object in jQuery. These sorts of errors are usually shown in the browser's console or in an dialog and are the first place to look when debugging JavaScript.

Upvotes: 1

ahren
ahren

Reputation: 16961

It doesn't work because there can only be ONE id on a page. jQuery assumes this, and will only select one of your radio buttons, therefore never finding any with the value '^'.

Simply change it to a class and it will work (or use some other kind of identification - like name)

$("."+theClass).filter(
    function(){ this.value == "^"}
).parent().hide();

You may also choose to use CSS selectors:

$("."+theClass+"[value='^']").parent().hide();

Upvotes: 1

Related Questions