Question

我已将整个代码包含在jsfiddle中，但无法在jsfiddle中正确加载jquery脚本。它的工作原理应该是当前的内容，即＆＃34; Post＆＃34;单击时显示。我想要的修改是隐藏的帖子细节在＆＃34; uk＆＃34;和＆＃34;发布＆＃34;选项，BOTH，被选中。目前它只适用于＆＃34; Post＆＃34;选项已被选中。谢谢。我确信下面的行需要更改

if(this.value == 'Post')

Answer 1

请注意，有几种方法可以做到这一点......我只是采用了与原始代码，js逻辑和html结构尽可能多的方式。新文本框的ID为group_list。

（查看最近编辑的底部）

<强> HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>



<div id="send_to">
  <input type="radio" id="send_poll" name="people" value="all" checked="checked" />all the attendees<br/>      
  <input type="radio" id="send_poll" name="people" value="one" />only one attendee<br/>
    <div id="send_to_one">
      <label>Write the attendee's name: </label><input type="text" id="attendeename" /><br/><br/>
    </div>
  <input type="radio" id="send_poll" name="people" value="group" />a group of attendees<br/>          
    <div id="send_to_group">
      <label>Write the groups's names: </label><input type="text" id="group_list" /><br/><br/>
    </div>     


</body>
</html>

<强> CSS

#send_to_one{display:none;}

#send_to_group{display:none;}

<强> jquery的

$(document).ready(function(){

    $("#send_to_one").hide();

    $("input:radio[name='people']").change(function(){  

            if(this.value == 'one' && this.checked){
              $("#send_to_one").show();
            }else{
              $("#send_to_one").hide();
            }

            if(this.value == 'group' && this.checked){
              $("#send_to_group").show();
            }else{
              $("#send_to_group").hide();
            }

    });
});

打开/关闭SAME div ...只需将原始JQuery修改为：

$(document).ready(function(){

    $("#send_to_one").hide();

    $("input:radio[name='people']").change(function(){  

            if((this.value == 'one' || this.value == 'group' ) && this.checked){
              $("#send_to_one").show();
            }else{
              $("#send_to_one").hide();
            }

    });

});

Answer 2

您不能同时选择同一组（同名）中的两个无线电。如果这是你想要做的，那么你应该使用复选框。

如果您有2个复选框，则有4种可能的状态。让我们调用两个复选框A和B。以下是可能的状态（选中1，未选中0）：

A | B
-----
1   0  // only A is checked
0   1  // only B is checked
0   0  // neither is checked
1   1  // A and B are both checked

处理此问题的最简单方法是使用一些if/else。

HTML：

<span id="msg">toggle some checkboxes</span>
<div>
  <input type="checkbox" id="a_checkbox" /> A <br/>
  <input type="checkbox" id="b_checkbox"/>  B <br />
</div>

JS：

var $a   = $("#a_checkbox"),
    $b   = $("#b_checkbox"),
    $msg = $("#msg");

$("input:checkbox").change(function () {

  var a_is_checked = $a.is(':checked'),
      b_is_checked = $b.is(':checked');

  if (a_is_checked && b_is_checked) {
    $msg.text('A and B are both checked');
  } else if (a_is_checked) {
    $msg.text('only A is checked');
  } else if (b_is_checked){
    $msg.text('only B is checked');
  } else {
    $msg.text('neither is checked');
  }
});

demo

假设我理解您的问题，此示例包含实现您自己的解决方案所需的一切。

修改

HTML：

<span id="msg">Select A and C</span>  <h2>Group 1</h2> <input type="radio" name="group1" value="A" /> A <br /> <input type="radio" name="group1" value="B" /> B <br />  <h2>Group 2</h1> <input type="radio" name="group2" value="C" /> C <br /> <input type="radio" name="group2" value="D" /> D <br />

js：

$(function(){ var $group1 = $("input:radio[name='group1']"), $group2 = $("input:radio[name='group2']"), $msg = $("#msg"); $("input:radio").change(function () { var group1_val = $group1.filter(':checked').val(), group2_val = $group2.filter(':checked').val(); if (group1_val === "A" && group2_val === "C") { $msg.text("A and C are both selected"); } else { $msg.text("Select A and C"); } }); });

demo

新手的Javascript代码更改

2 个答案: