CODEWITHSUNDEEP
javascriptjqueryradio-buttonclick
user3182654
user3182654

Reputation: 47

How to check if a radio button is clicked?

My code looks like this:

form action="familytree.php" method="post">
<?php
foreach ($spouses as $spouse) {
    if (!empty($spouse['mname'])) {
        $name = $spouse['fname'].' '.$spouse['lname'].' ('.$spouse['mname'].')';
    }
    else {
            $name = $spouse['fname'].' '.$spouse['lname'];
    }
    if ($spouse['ended'] == '1') {
        $married = '';
        $divorced = 'checked';
    }
    else {
        $married = 'checked';
        $divorced = '';
    }
    ?>
    <div class="form_section dates">
        <h3><?php echo $name; ?></h3>
        <p>
        <input type="radio" id="married_option" name="married_divorced_options" <?php echo $married; ?> value="1"/>
        <label for="edate">Married</label>&nbsp; &nbsp; &nbsp;  
        <input type="radio" id="divorced_option" name="married_divorced_options" <?php echo $divorced; ?> value="1"/>
        <label for="sdate">Divorced</label> 
        </p>
        <div class="half" style="display: inline">
            <input type="text" name="sdate_<?php echo $spouse['individual_id']?>" id="sdate_<?php echo $spouse['individual_id']?>" value="<?php echo $spouse['start_date']; ?>" placeholder="Rašykite sutuoktuvių datą čia"/>
            <?php echo $this->formError->error("sdate_".$spouse['individual_id'].""); ?>
        </div>
        <div id="divorced" class="half" style="display:none">
            <input type="text" name="edate_<?php echo $spouse['individual_id']?>" id="edate_<?php echo $spouse['individual_id']?>" value="<?php echo $spouse['end_date']; ?>" placeholder="Rašykite skyrybų datą čia"/>
            <?php echo $this->formError->error("edate_".$spouse['individual_id'].""); ?>
        </div>
    </div>
    <?php
    }
    ?>
    <p class="submit">
        <input class="first-btn" type="submit" id="edit-relationship" name="edit-relationship" value="Edit"/>&nbsp;
    </p>
    </form>
jQuery("#divorced_option").click(function() {
   document.getElementById("divorced").style.display = "inline-block";
});
jQuery("#married_option").click(function() {
   document.getElementById("divorced").style.display = "none";
});

What I would like to know is how to check if a radio button is clicked when you don't know its full name, only half of it. For example, #divorced_option is not full name, it should be something like this #divorced_option_161, #divorced_option_161... So, the code should check if the radio button that has divorced_option in its name is clicked. Is there a way to achieve this?

EDIT It works with jQuery("[id^='married_option']").click(function(){}). But I forgot to mention in my original question that the element divorced isn't full name as well, it should be divorced_161, divorced_162, depending of the name of the radio button that is clicked. How can I hide the element that matches with the radio button?

Upvotes: 1

Views: 557

Answers (3)

user2699477
user2699477

Reputation:

You can select the elements based on the #divorced_option_[number] pattern while checking if they are selected like this:

$("input[id*=divorced_option]:checked");

If you would like to check wether the divorced_option substring is in the name="" attribute of the radio element, then change the id from the selector to name, like so:

$("input[name*=divorced_option]:checked");

After this, just check wether or not jQuery returned an actual element.

Upvotes: 0

VirtSE
VirtSE

Reputation: 35

Have a look at the jQuery selectors.

The 'Attribute Contains' selector would be useful here, which means your code would be :

jQuery("[id*='divorced_option']").click(function() {
    document.getElementById("divorced").style.display = "inline-block";
});
jQuery("[id*='married_option']").click(function() {
    document.getElementById("divorced").style.display = "none";
});

Upvotes: 0

j08691
j08691

Reputation: 207861

Use the attribute starts with selector (ex. [name^="value"]):

jQuery("[id^='divorced_option']").click(function() {
   document.getElementById("divorced").style.display = "inline-block";
});
jQuery("[id^='married_option']").click(function() {
   document.getElementById("divorced").style.display = "none";
});

Upvotes: 4

Related Questions