Question

  <progress value="0" max="100" id="p1"></progress> 

<div class="allQuestion"><?php for($i=1; $i<=10; $i++){?><input type="radio" name="Dq[1]" value="<?=$i?>" onClick='incr();'> <?=$i?> <?php } ?></div>

JS

<script type="text/javascript">
function incr() { 
var v1=document.getElementById('p1').value;
document.getElementById("p1").value= v1 + 1;
}
</script>

我的目的是让1-10点之间的问题只能点击一次，但输入是由php生成的，所以如果我把onclick放在输入内，我点击的每个收音机都会增加进度条，我只需要收音机只点击一次且进度条保持相同％，让每个问题1％一次点击它只增加1％，当重新点击它仍然是1％。

或者我也不想使用jquery。

Answer 1

我不是百分之百确定你在这里问的是什么（根据下来的选票判断其他人也是如此）。

在StackOverflow上提问的一些一般提示：

你的问题应该清楚（实际上很难判断你在这里问的是什么）
理想情况下，您的代码应以可读的方式呈现（您提供的PHP / HTML代码全部在一行，并且考虑到有关JavaScript功能的问题，我们无法访问在PHP代码的其余部分，PHP代码在问题方面是无用的，并且可以更加努力地回答你的问题）。
JSFiddles通常很有帮助（这意味着浪费时间来复制问题）

在提问时尝试并遵循上述建议，但列表绝不是全部，但您也应该仔细阅读guidelines on asking questions here。

现在回答你的实际问题。

我猜你想要你的代码如下运作：

用户只能选择一次
选择一个选项后，应将其添加到段落的数字内容中

假设我已经解决了上述问题（如果没有，请告诉我），以下代码应该适合您：

HTML：

<p id="answerResult">1</p>

<div class="allQuestion" id="allQuestion">
    <input type="radio" name="questionAnswer" value="1" /> 1<br />
    <input type="radio" name="questionAnswer" value="2" /> 2<br />
    <input type="radio" name="questionAnswer" value="3" /> 3<br />
    <input type="radio" name="questionAnswer" value="4" /> 4<br />
    <input type="radio" name="questionAnswer" value="5" /> 5<br />
    <input type="radio" name="questionAnswer" value="6" /> 6<br />
    <input type="radio" name="questionAnswer" value="7" /> 7<br />
    <input type="radio" name="questionAnswer" value="8" /> 8<br />
    <input type="radio" name="questionAnswer" value="9" /> 9<br />
    <input type="radio" name="questionAnswer" value="10" /> 10<br />
</div>

JavaScript的：

// the paragraph that contains information about your currently selected answer
var answerSummary = document.getElementById('answerResult');
// the container of the radio buttons
var answersContainer = document.getElementById("allQuestion");
// the radio buttons
var answerOptions = answersContainer.getElementsByTagName("input");

for(var i = 0; i < answerOptions.length; i++) {
    answerOptions[i].addEventListener("click", function(event) {
        // change the paragraph to show the currently selected value
        answerSummary.innerHTML = answerSummary.innerHTML + " " + this.value;

        // disable all radio buttons once an options has been selected
        for(var i = 0; i < answerOptions.length; i++) {
            answerOptions[i].disabled = true;
        }
    });
}

此代码的实际链接： http://jsfiddle.net/44mvrftu/4/

我已经非常重构了您的代码，试图使其更具可读性，易维护性和易于理解，我改变了一些事情：

更好的变量名称（v1永远不应该是变量名称）
没有＆＃39; onclick＆＃39;在HTML中，你永远不应该真的这样做，因为它意味着你混合了HTML和JavaScript（表示和功能），这使得可维护性变得更加困难，并且在某些方面可能性能较差。如果您发现我添加onclick事件处理程序的方式令人困惑，请告诉我，我会尝试帮助您理解，或者您可以修改上述代码以使用＆＃39; onclick＆＃39;在HTML中。
我删除了PHP（这对我来说是创建工作演示所必需的）
我使用过纯JavaScript，这在jQuery中实现会更简单，更清晰，并且还可以确保它在旧版浏览器中工作（上面的代码只能在现代浏览器中可靠地工作）但是你已经没有说任何关于jQuery的事情，所以我以为你没有用过它。

我希望我能说得对吗？如果您有任何问题，请告诉我。

Answer 2

问题不明确，如果您只想使用jQuery .one(),see details here

表示只想点击一次

Answer 3

嗯，我不知道你想要什么？您可以同时使用PHP和Javascript，但这取决于您想要做什么。

jQuery解决方案：

$("input").one("click", function () {
alert($("input[type=checkbox]").val());
});

php onclick一次输入内部

3 个答案: