如何检查单选按钮是否被点击？答案

【问题标题】：How to check if a radio button is clicked?如何检查单选按钮是否被点击？
【发布时间】：2014-05-19 20:58:51
【问题描述】：

我的代码如下所示：

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，取决于单击的单选按钮的名称。如何隐藏与单选按钮匹配的元素？

【问题讨论】：

在其名称中还是在其 ID 中？
@AndrewNewby：代码中的第一个字是jQuery，所以可能是一个安全的赌注。
为什么不对所有这些都使用“类”属性？（因为 id 是动态的）
显示一些 html。甚至是一个 jsfiddle
@cookiemonster - 哈哈我怎么错过了！！！！！！漫长的一天 :) 另一条评论仍然存在 - 多一点 HTML 会有所帮助。

标签： javascript jquery button click radio

【解决方案1】：

使用attribute starts with selector（例如[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";
});

【讨论】：

也可以使用$('#divorced').show() / hide()？ ;)
谢谢，它有效。但是我忘了在我的问题中提到离婚的元素也不是全名，它应该是离婚_161，离婚_162，具体取决于单击的单选按钮的名称。如何隐藏与单选按钮匹配的元素？
如果应该引用被点击的元素，只需在点击处理程序中使用this 或$(this)。
@j08691，问题是点击的元素不是应该隐藏的元素。
那么被点击的元素应该如何知道应该隐藏哪个元素呢？有什么关系？

【解决方案2】：

看看jQuery selectors。

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

【讨论】：

【解决方案3】：

您可以根据#divorced_option_[number] 模式选择元素，同时检查它们是否被这样选择：

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

如果您想检查divorced_option 子字符串是否在radio 元素的name="" 属性中，则将选择器中的id 更改为name，如下所示：

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

在此之后，只需检查 jQuery 是否返回了实际元素。

【讨论】：