Question

当用户点击上传奖品单选按钮时，jQuery应显示 #upload_prize_file_box输入。当用户点击提供访问权限单选按钮时，应显示 pa_block 。

当我尝试使用下面的代码执行此操作时，页面不响应。

HTML：

<tr>
 <td id="optBox">
    <input name="opt-radio" type="radio" id="upload_prize" value="upload_prize" checked="checked" />
    <label for="upload_prize">Upload Prize</label>
    <input name="opt-radio" type="radio" id="provide_access" value="provide_access" />
    <label for="provide_access">Provide Access</label>
 </td>
</tr>
<tr>
 <td id="upload_prize_file_box" colspan="2" style="display:none;">
     <input type="file" name="upload_prize_file" id="upload_prize_file" />
 </td>
</tr>
<tr>
 <td height="160" colspan="2" id="pa_block" style="display:none;">
     <table width="100%" border="0">
     <tr>
       <td width="32%">URL</td>
       <td width="68%"><input type="text" name="pa_url" id="pa_url" /></td>
     </tr>
     <tr>
       <td>Username</td>
       <td><input type="text" name="pa_username" id="pa_username" /></td>
     </tr>
     <tr>
       <td>Password</td>
       <td><input type="text" name="pa_password" id="pa_password" /></td>
     </tr>
     <tr>
       <td>Is your prize attached to an affiliate program in Clickbank?</td>
       <td>
            <input type="radio" name="radio" id="pa_yes" value="pa_yes" />
            <label for="pa_yes">Yes</label>
            <input type="radio" name="radio" id="pa_no" value="pa_no" />
            <label for="pa_no">No</label>
       </td>
      </tr>
      <tr>
        <td colspan="2">
            <textarea name="pa_textarea" id="pa_textarea" cols="45" rows="5"></textarea>
        </td>
       </tr>
       <tr>
          <td height="29" colspan="2">Enter hoplink with our affiliate code, which is: iasst</td>
       </tr>
</table>
</td>

jQuery的：

$(document).ready(function() {
    if("#optBox input[type=radio]").click(function(){
        if($("input[type=radio]:checked","optBox").val()=='upload_prize'){
            $("#upload_prize_file_box").show();
            $("#pa_block").css('display','none');
        }
        if($("input[type=radio]:checked","optBox").val()=='provide_access'){
            $("#pa_block").show();
            $("#upload_prize_file_box").css('display','none');
        }
    });
});

http://jsfiddle.net/GSXQ5/

如何激活单选按钮？

Answer 1

在这里，我为你修好了：http://jsfiddle.net/GSXQ5/29/。

您多次错过<table>标记和$符号;在jQuery代码的第二行中，您输入了if而不是$。

Answer 2

您的标记无效：您在td之外有tr和table个元素。一旦你解决了这个问题：

$("#optBox input[type=radio]").click(function(){
    if(this.value == 'upload_prize'){
        $("#upload_prize_file_box").show();
        $("#pa_block").css('display','none');
    }  else if(this.value == 'provide_access'){
        $("#pa_block").show();
        $("#upload_prize_file_box").css('display','none');
    }
});

您错过了ID选择器中的#符号：$("input[type=radio]:checked","optBox")应为$("input[type=radio]:checked","#optBox")。您可以使用this.value来获取单选按钮值，这不太详细。

Demo关于jsFiddle。

Answer 3

$("#optBox input[type=radio]").live('click',function(){

.live始终将事件句柄附加到您的单选按钮。试试你的代码。

Answer 4

在您的javascript代码的第二行，您放置了if而不是$。

该行应该是：

$("#optBox input[type=radio]").click(function(){

在检查收音机是否已检查时，您在#之前错过了optBox。在这里，我已经为你调试了代码。

$(document).ready(function() {
    $("#optBox input[type=radio]").click(function(){
        if($("input[type=radio]:checked","#optBox" /*You placed optBox instead of #optBox*/
            ).val()=='upload_prize'){
            $("#upload_prize_file_box").show();
            $("#pa_block").css('display','none');
        }
        if($("input[type=radio]:checked","#optBox" /*You placed optBox instead of #optBox*/
            ).val()=='provide_access'){
            $("#pa_block").show();
            $("#upload_prize_file_box").css('display','none');
        }
    }); 
});

另外我忘了提到你的表没有遵循正确的标记。我已经纠正了你。

<table>
<tr>
 <td id="optBox">
    <input name="opt-radio" type="radio" id="upload_prize" value="upload_prize" checked="checked" />
    <label for="upload_prize">Upload Prize</label>
    <input name="opt-radio" type="radio" id="provide_access" value="provide_access" />
    <label for="provide_access">Provide Access</label>
 </td>
</tr>
<tr>
 <td id="upload_prize_file_box" colspan="2" style="display:none;">
     <input type="file" name="upload_prize_file" id="upload_prize_file" />
 </td>
</tr>
<tr>
 <td height="160" colspan="2" id="pa_block" style="display:none;">
     <table width="100%" border="0">
     <tr>
       <td width="32%">URL</td>
       <td width="68%"><input type="text" name="pa_url" id="pa_url" /></td>
     </tr>
     <tr>
       <td>Username</td>
       <td><input type="text" name="pa_username" id="pa_username" /></td>
     </tr>
     <tr>
       <td>Password</td>
       <td><input type="text" name="pa_password" id="pa_password" /></td>
     </tr>
     <tr>
       <td>Is your prize attached to an affiliate program in Clickbank?</td>
       <td>
            <input type="radio" name="radio" id="pa_yes" value="pa_yes" />
            <label for="pa_yes">Yes</label>
            <input type="radio" name="radio" id="pa_no" value="pa_no" />
            <label for="pa_no">No</label>
       </td>
      </tr>
      <tr>
        <td colspan="2">
            <textarea name="pa_textarea" id="pa_textarea" cols="45" rows="5"></textarea>
        </td>
       </tr>
       <tr>
          <td height="29" colspan="2">Enter hoplink with our affiliate code, which is: iasst</td>
       </tr>
</table>
</td>
</tr>
</table>

希望能解决它。

和平在你身上。

Answer 5

首先纠正你的HTML

<table>
<tr>
 <td id="optBox">
    <input name="opt-radio" type="radio" id="upload_prize" value="upload_prize" checked="checked" />
    <label for="upload_prize">Upload Prize</label>
    <input name="opt-radio" type="radio" id="provide_access" value="provide_access" />
    <label for="provide_access">Provide Access</label>
 </td>
</tr>
<tr>
 <td id="upload_prize_file_box" colspan="2" style="display:none;">
     <input type="file" name="upload_prize_file" id="upload_prize_file" />
 </td>
</tr>
<tr>
 <td height="160" colspan="2" id="pa_block" style="display:none;">
     <table width="100%" border="0">
     <tr>
       <td width="32%">URL</td>
       <td width="68%"><input type="text" name="pa_url" id="pa_url" /></td>
     </tr>
     <tr>
       <td>Username</td>
       <td><input type="text" name="pa_username" id="pa_username" /></td>
     </tr>
     <tr>
       <td>Password</td>
       <td><input type="text" name="pa_password" id="pa_password" /></td>
     </tr>
     <tr>
       <td>Is your prize attached to an affiliate program in Clickbank?</td>
       <td>
            <input type="radio" name="radio" id="pa_yes" value="pa_yes" />
            <label for="pa_yes">Yes</label>
            <input type="radio" name="radio" id="pa_no" value="pa_no" />
            <label for="pa_no">No</label>
       </td>
      </tr>
      <tr>
        <td colspan="2">
            <textarea name="pa_textarea" id="pa_textarea" cols="45" rows="5"></textarea>
        </td>
       </tr>
       <tr>
          <td height="29" colspan="2">Enter hoplink with our affiliate code, which is: iasst</td>
       </tr>
</table>
    </td>
     </tr>
</table>

<强> jquery的：

$(document).ready(function() {
     $("input[name=opt-radio ]").click(function(){ 

        if( $(this).val() =='upload_prize'){
            $("#upload_prize_file_box").show();
            $("#pa_block").hide();
        } else if( $(this).val()=='provide_access'){
             $("#upload_prize_file_box").hide();
            $("#pa_block").hide(); 
        }
    });
});

Answer 6

检查此工作演示

http://jsfiddle.net/GSXQ5/21/

修改

http://jsfiddle.net/GSXQ5/28/

jQuery单选按钮没有响应

6 个答案:

修改