如何檢查單選按鈕是否被點擊？

Question

我的代碼如下所示：

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";
});

我想知道的是當你不知道它的全名時，如何檢查一個單選按鈕是否被點擊，只知道它的一半。 例如，# #divorced_option不是全名，它應該是這樣的#divorced_option_161, #divorced_option_161...所以，代碼應該檢查名稱中帶有divorced_option選項的單選按鈕是否被單擊。 有沒有辦法做到這一點？

編輯它適用於jQuery("[id^='married_option']").click(function(){}) 。 但是我忘記在我原來的問題中提到離婚的元素也不是全名，它應該是離婚_161，離婚_162，這取決於單擊的單選按鈕的名稱。 如何隱藏與單選按鈕匹配的元素？

Answer 1

使用以選擇器開頭的屬性（例如[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";
});

Answer 2

看看jQuery 選擇器。

' Attribute Contains ' 選擇器在這里很有用，這意味着您的代碼將是：

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";
});

Answer 3

您可以根據#divorced_option_[number]模式選擇元素，同時檢查它們是否像這樣選擇：

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

如果您想檢查divorced_option選項子字符串是否位於 radio 元素的name=""屬性中，則將選擇器中的id更改為name ，如下所示：

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

在此之后，只需檢查 jQuery 是否返回了實際元素。